Question

I have something like this :

<div style="width:1300px">
  <ul class="ul-length ul-textalign">
    <li class="li-horizontal"> A </li>
    <li class="li-horizontal"> B </li>
    <li class="fillgap"/>
  </ul>
</div>

I am trying to have the last li fill the rest of the line with some background. I would like to avoid a code specifying the width of the li fillgap depending on the length of previous lis. Thus, I wanted to have this last li in absolute positioning, and have it take the entire width of the ul :

.fillgap {
  position:absolute;
  width:1300px; /* for some reason, width:100% is longer than the div width... */
  z-index:0;
}

.ul-length {
  with:100%;
}

.ul-textalign {
  text-align:left; /* fix for IE, prevents the absolute li from beginning at the center */
}

.li-horizontal {
   float:left;
}

The easiest way to have a background on the entire width is probably to set the background of the ul, but I cannot do this because it won’t fit the design intended. I need to be able to do this with the lis. And my above code results in a problem in IE : the li fillgap seems to be kept in the page flow because it is put next to the previous lis, instead of being at the beginning of the ul…

Any idea?

Here is the result expected (in opera) :

Here is the result in IE :

Answer 1

Add position: relative to .ul-length. That makes the position: absolute on the li relative to .ul-length.

That lets you change the width from 1300px to 100%;

Here’s a fiddle: http://jsfiddle.net/joplomacedo/5vykm/

Still, I’m not quite sure why you need to add position: absoluteto the li at all. If you want it to stay exactly where it is why position: absolute it?