title: Absolute positioning of li inside ul with cross-browser compatibility
body: <p>I have something like this : </p>
  
  <pre><code>&lt;div style="width:1300px"&gt;
    &lt;ul class="ul-length ul-textalign"&gt;
      &lt;li class="li-horizontal"&gt; A &lt;/li&gt;
      &lt;li class="li-horizontal"&gt; B &lt;/li&gt;
      &lt;li class="fillgap"/&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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 : </p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>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...</p>
  
  <p>Any idea?</p>
  
  <p>Here is the result expected (in opera) : 
  <img src="https://i.stack.imgur.com/AnnVE.png" alt="enter image description here"></p>
  
  <p>Here is the result in IE : 
  <img src="https://i.stack.imgur.com/ROtrK.png" alt="enter image description here"></p>