title: Fluid design and position absolute
body: <p>This is a fluid design of four images (width = 160px) with ul or floated divs.
   
  Everything is well when resizing window. It's fluid.</p>
  
  <p>But when I pass to an absolute position, I find no more 160px initially.</p>
  
  <p>You can see the problem here <a href="http://jsfiddle.net/zXDH9/" rel="nofollow">http://jsfiddle.net/zXDH9/</a></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          body { position:relative; }
          .container {
              /* remove comment to view problem */
              /*position:absolute; left:0; top:0;*/
              margin: 0;
              padding: 0;
              border: black 1px solid;
              max-width: 690px;
              overflow: hidden;
          }
          .galleryItem {
              float: left;
              width: 23%;
              margin: 0 1%;
              padding: 1% 0;
          }
          .galleryItem img { max-width: 100%; }
          ul { list-style: none; }
          ul.thumbs  {
              /* remove comment to view problem */
              /*position: absolute; left:0; top: 100px;*/
              display: block;
              margin: 0;
              padding: 0;
              border: black 1px solid;
              max-width:690px; overflow: hidden;
          }
          ul.thumbs&gt;li {
              display: block;
              float: left;
              width: 23%;
              margin: 0 1%;
              padding: 1% 0;
          }
          ul.thumbs&gt;li img {
              display: block;
              max-width: 100%;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="container"&gt; 
          &lt;div class="galleryItem"&gt;&lt;a href="#"&gt;&lt;img src="http://www.e-business.tn/focus/images/galleria/hobs/thumbs/F.801X_mini.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div class="galleryItem"&gt;&lt;a href="#"&gt;&lt;img src="http://www.e-business.tn/focus/images/galleria/hobs/thumbs/F.802X_mini.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
          &lt;div class="galleryItem"&gt;&lt;a href="#"&gt;&lt;img src="http://www.e-business.tn/focus/images/galleria/hobs/thumbs/F.801W_mini.jpg" alt="" /&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;ul class="thumbs"&gt;
          &lt;li class=""&gt;&lt;a href="#"&gt;&lt;img src="http://www.e-business.tn/focus/images/galleria/hobs/thumbs/F.801X_mini.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;a href="#"&gt;&lt;img src="http://www.e-business.tn/focus/images/galleria/hobs/thumbs/F.802X_mini.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class=""&gt;&lt;a href="#"&gt;&lt;img src="http://www.e-business.tn/focus/images/galleria/hobs/thumbs/F.801W_mini.jpg" alt="" /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"&gt;/*jQuery 1.5.1 Supports IE9, but not 1.5.0*/&lt;/script&gt;
      &lt;script&gt;
          $(function(){ // Document is ready
              /*alert($('ul.thumbs').outerWidth(true));*/
          });
      &lt;/script&gt;   
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>