css problem lining up some icons...

Question

I'm having a problem lining up some icons and am new enough to css that I'm not exactly sure how to explain this. So I've attached a picture of what the out put is rendering like. I've also included what the css and html code is. Hopefully someone can help point me in the right direction to help fix this.

I want the "edit", "archive", "delete" icons to all line up in the right side exactly the same as the first row in the picture.

Here is the html:

<ul id="nav">
<li>California
    <div class="portf_edit">
        <span>
            <img src="../images/edit.png">
        </span>
    </div>
    <div class="portf_archive">
        <span>
            <img src="../images/archive.png">
        </span>
    </div>
    <div class="portf_delete">
        <span>
            <img src="../images/delete.png">
        </span>
    </div>
</li>
<li>Hyrum
    <div class="portf_edit">
        <span>
            <img src="../images/edit.png">
        </span>
    </div>
    <div class="portf_archive">
        <span>
            <img src="../images/archive.png">
        </span>
    </div>
    <div class="portf_delete">
        <span>
            <img src="../images/delete.png">
        </span>
    </div>
</li>

Here is the css:

li {
list-style-type:none;
vertical-align: bottom;
list-style-image: none;
left:0px;
text-align:left;
}
ul {
list-style-type: none;
vertical-align: bottom;
list-style-image: none;
left:0px;
}
ul#nav{
margin-left:0;
padding-left:0px;
text-indent:15px;   
}

.portf_edit{
float:right;
position: relative;
right:50px;
display:block;
}
.portf_archive{
float:right;
position: relative;
right:-5px;
display:block;
}

.portf_delete{
float:right;
position: relative;
right: -60px;
display:block;
}

Here's what is being output:

Any ideas where to start? Thanks.

Answer 1

Add this to your CSS:

ul#nav div{
  overflow: hidden;
}

The gist of it is that your floating elements reduce the height of your divs to 0. If you add overflow: hidden to the div then the element will be forced to contain the floating elements and thus have a positive height.

Answer 2

The easiest way to fix this is to turn off the float by adding a clear to the LI style as shown below.

li {
 list-style-type:none;
 vertical-align: bottom;
 list-style-image: none;
 left:0px;
 text-align:left;
 clear: both; 
}