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:alt text http://www.redsandstech.com/css_layout_problem.jpg

Any ideas where to start? Thanks.

Answer 1

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; 
}