title: 2 column layout (Left column fixed width, right fluid + clear:both)
body: <p>Just need help as I have been trying sort this out for ages now.  What I need:</p>
  
  <p>I've got a 2 column layout, where the left column has a fixed width 220px and the right column has a fluid width.</p>
  
  <p>Code is:</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
   &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
   &lt;head&gt;
       &lt;title&gt;Fluid&lt;/title&gt;
      &lt;style type="text/css" media="screen"&gt;
          html, body { background: #ccc; }
          .wrap      { margin: 20px; padding: 20px; background: #fff; }
          .main      { margin-left: 220px; width: auto }
          .sidebar   { width: 200px; float: left; }
          .main,
          .sidebar   { background: #eee; min-height: 100px; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="wrap"&gt;
          &lt;div class="sidebar"&gt;This is the static sidebar&lt;/div&gt;
          &lt;div class="main"&gt;This is the main, and fluid div&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>There's no problem at all. When I use a css syntax <strong>clear: both</strong> in the right column, all content after gets moved under the left column. This is a right behaviour and nothing against it. </p>
  
  <p>But I relly need to use clear: both in the way, that it stays just in context of the right column (doesn't get affected by the left column at all, and doesn't move underneath)</p>
  
  <p>Is there any simple get around with retaining a basic float concept of page design?</p>
  
  <p>UPDATE: Please see this link to know what I'm on about as it may be a bit confusing from my description. 
  Link: <a href="http://jsfiddle.net/k4L5K/1/" rel="noreferrer">http://jsfiddle.net/k4L5K/1/</a></p>