title: Two CSS columns - when width shrinks right hand column goes to bottom of left hand column
body: <p>On the left we have a context sensitive navigation/information bar. At times there is very little information in it and other times it takes up the entire height of the page. I've seen a bunch of suggestions on other posts about floating, etc but nothing I've tried works.</p>
  
  <pre><code>.tablebox {float:left;position:relative;z-index:1;border-right:1px solid #000000;}
  .groupbox {float:left;position:relative;z-index:-1;border-right:1px solid #000000;}
  </code></pre>
  
  <p>So two divs for the sidebar - one to create the background layer which will take up the entire height of the page and then tablebox with the actual content on it - it could have a different background color as required.</p>
  
  <pre><code>&lt;div class="tablebox" style="margin-top:5px;width:247px;"&gt;Sidebar&lt;/div&gt;
  &lt;div class="groupbox" style="width:247px;background-color:#FFFFFF;top:120px;bottom:0;left:0px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Then we have the right hand side main content... again the idea being that tablebox would have a different background colour and appear to float on top of the page.</p>
  
  <pre><code>&lt;div class="tablebox" style="margin-top:5px;width:777px;"&gt;Main content&lt;/div&gt;
  &lt;div class="groupbox" style="width:777px;top:120px;bottom:0;left:247px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Now if the browser width gets to be too small the right hand div falls below the sidebar. Whether there's room there or not.</p>
  
  <p><strong>SOLUTION:</strong>
  The problem was that the two sets of divs's parent did not have a defined size. As the browser window was resized the children got shuffled to fit inside of the new size. By defining a parent div with a fixed width and adding a overflow:auto the parent would not change even if the browser window was.</p>
  
  <p>Note: This is not the best way to resolve this obviously - this means that the content does not dynamically format itself. It now has a fixed width. In my case I have no other choice. It is a band aid solution but if you're in the design stage think about people viewing your page from a cellphone or old people with their low resolution screens and giant text.</p>
  
  <p>To be clear for those easily confused:</p>
  
  <pre><code>&lt;div style="width:1053px;overflow:auto"&gt;
  &lt;div class="tablebox" style="margin-top:5px;width:247px;"&gt;Sidebar&lt;/div&gt;
  &lt;div class="groupbox" style="width:247px;background-color:#FFFFFF;top:120px;bottom:0;left:0px;"&gt;&lt;/div&gt;
  &lt;div class="tablebox" style="margin-top:5px;width:777px;"&gt;Main content&lt;/div&gt;
  &lt;div class="groupbox" style="width:777px;top:120px;bottom:0;left:247px;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But again - if you have a choice don't do this! Fixed width will not make your site very pretty on some devices.</p>