File listing layout

Question

I am designing a very basic file listing layout in HTML and CSS. Although its working but I would like to know if the following code could be improved upon so that its more good and follows the best practices. I am looking forward of supporting I.E 9+ too. Plus I would like to add a progress bar behind the left-wing. In other words I would like to show download progress behind the filename and time as a whole.

I am showing only the part I would like to review. Note that some text is white, and is visible in this JSFiddle.

#list-content
{
	margin:auto;
	margin-top: 5%;
	left: 0;
	right: 0;
	overflow-y: auto;
	position: absolute;
	width: 90%;
	height: calc(95% - 105px);
}
#file_list
{
	width: 100%;
}
#file_list li
{
	overflow: hidden;
	padding-top: 4px;
	padding-bottom: 4px;
}
.f_icon
{
	width: 10%;
	float: left;
	text-align: center;
}
.f_icon img
{
	width: 32px;
	height: 32px;
	display: block;
}
.left_wing
{
	width: 50%;
	float: left;
}
.f_name
{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	color: #FFFFFF;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.f_time
{
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 12px;
	font-style: italic;
	color: cornflowerblue;
	padding-top: 2px;
}
.right_wing
{
	width: 40%;
	float: right;
	margin-top: 6px;
}
.f_size
{
	float: right;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight: bold;
	color: #FFFFFF;
}
.f_delete
{
	float: right;
	font-family: 'Source Sans Pro', sans-serif;
	color: #B10002;
	margin-left: 15px;
	margin-right: 4px;
}

<div id="list-content">
    <ul id="file_list">
        <li>
            <div class="f_icon"><img src="images/Docs-icon.png"></div>
            <div class="left_wing">
                <div class="f_name">File name Short and loooooooooooong.ext</div>
                <div class="f_time">Sep 08, 2016</div>
            </div>
            <div class="right_wing">
                <div class="f_delete"><i class="fa fa-trash fa-align-center" aria-hidden="true"></i></div>
                <div class="f_size">34.50 MB</div>
            </div>
        </li>

        <li>
            <div class="f_icon"><img src="images/Docs-icon.png"></div>
            <div class="left_wing">
                <div class="f_name">File name Short.ext</div>
                <div class="f_time">Sep 08, 2016</div>
            </div>
            <div class="right_wing">
                <div class="f_delete"><i class="fa fa-trash fa-align-center" aria-hidden="true"></i></div>
                <div class="f_size">34.50 MB</div>
            </div>
        </li>
    </ul>
</div>

Answer 1

img: alt

Each ìmg element needs an alt attribute. If the image is only decorative or redundant, use an empty value:

<img src="images/Docs-icon.png" alt="">

time

You could use the time element for the dates:

<time class="f_time" datetime="2016-09-08">Sep 08, 2016</time>

abbr

If you want, you could use abbr for "MB", and give the expansion in the title attribute:

<div class="f_size">34.50 <abbr title="Megabyte">MB</abbr></div>

span instead of i

You should not use the i element for CSS icons. Use the meaningless span instead:

<span class="fa fa-trash fa-align-center" aria-hidden="true"></span>

Accessibility of delete function

Note that this icon will not be accessible (because the element has no content, and because of aria-hidden anyway). If it’s really a delete function (which the class name suggests), you should provide alternate content so that, for example, also users with screenreaders can delete files.

The most simple solution would be to use a button with an img that has an alt value like "Delete file xy":

<button type="button"><img src="delete.png" alt="Delete file 'File name Short.ext'"></button>

Markup structure

It seems to me that you have a table, not a list. Then you should use the table element.

<table>

  <thead>
    <tr>
      <th>Name</th>
      <th>Date</th>
      <th>Size (in <abbr title="Megabyte">MB</abbr>)</th>
      <th>Delete</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>File name Short and loooooooooooong.ext</td>
      <td><time datetime="2016-09-08">Sep 08, 2016</time></td>
      <td>34.50</td>
      <td><button type="button"><img src="delete.png" alt="Delete file 'File name Short and loooooooooooong.ext'"></button></td>
    </tr>
    <tr>
      <td>File name Short.ext</td>
      <td><time datetime="2016-09-08">Sep 08, 2016</time></td>
      <td>34.50</td>
      <td><button type="button"><img src="delete.png" alt="Delete file 'File name Short.ext'"></button></td>
    </tr>
  </tbody>

</table>