Question

When I show a hidden div that is stored inside an <li> tag the icons are pushing down to the bottom of the <li>. How can I prevent this?

Here’s the HTML:

<ul>
<li>Utah
   <ul>
      <li>Park City
         <ul>
             <li>Park Cat 1
                  <div><img class="portf_edit" /></div>
                  <div><img class="portf_archive" /></div>
                  <div><img class="portf_delete" /></div>
             </li>
             <li>Skiing
                  <div><img class="portf_edit" /></div>
                  <div><img class="portf_archive" /></div>
                  <div><img class="portf_delete" /></div>
             </li>
         </ul>
      </li>
   </ul>
</li>
</ul>

Here’s the li css:

li {
list-style-type:none;
vertical-align: top;
list-style-image: none;
left:0px;
text-align:left;
clear: both;
}
.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 a screen shot prior to expanding which shows the icons how I want them to line up:

alt text http://www.redsandstech.com/css_layout_problem1.jpg

Here’s the screen shot prior to expanding which shows where the icons are being pushed to:

alt text http://www.redsandstech.com/css_layout_problem2.jpg

Answer 1

If you’re right-floating the EDIT/ARCHIVE/DELETE buttons, specify them BEFORE the text. Like this:

<li>
   <div><img class="edit" /></div>
   <div><img class="archive" /></div>
   <div><img class="delete" /></div>
   Park Cat 1
</li>

Also, you may need to specify a width on the LI; something like “100%”.