title: Fixed Left and Right Columns, Liquid Middle Unable to Span Entire Page
body: <p>I'm trying to <em>not</em> use adobe pre-defined CSS templates and instead create my own.  I have a 130px height header i want to span the entire width.  Beneath that, I want fixed columns of 150px on the far left and far right of the page.  The middle, I want to span the entire width of the browser.  All of these contained in a "container" div.</p>
  
  <p>My header is fine, floated left and width = 100%.  Next, left column width = 150px and floated left.  No problem.  Then, the "content", which when i float left appears in line where it should be.  Then the 150px-wide right column, also floated left.</p>
  
  <p>What do I set the content (middle div) width to be?  If I do 100%, it puts it beneath the left column - even if I set margins of 150px on both sides to accommodate the columns.  If I do "auto" it also breaks the horizontal integrity.  Right now it's at 70%, which makes them all line up, but doesn't take up the full screen at large resolutions. (I have a minimum width set).  This seems like it should be an easy fix - my hunch is that it has something to do with the "absolute" positioning of the container div.  Thanks for any ideas/help.</p>
  
  <p>Here is the link to the page:</p>
  
  <p><a href="http://www.mynextbit.com/Fifty%20Stars%20Thirteen%20Stripes/index.html" rel="nofollow">http://www.mynextbit.com/Fifty%20Stars%20Thirteen%20Stripes/index.html</a></p>
  
  <p>Here is my code:</p>
  
  <pre><code>.container {
  float: left;
  height: auto;
  padding: 0px;
  margin: 0px;
  left: 0px;
  top: 0px;
  clip: rect(0px,auto,auto,0px);
  position: absolute;
  width: auto;
  min-width: 1024px;
  }
  .header {
  
  }
  .leftcol {
  width: 150px;
  float: left;
  text-align: center;
  }
  .content {
  height: auto;
  float: left;
  text-indent: 10px;
  overflow: scroll;
  width: 70%;
  min-width: 700px;
  }
  .rightcol {
  float: left;
  width: 150px;
  clear: none;
  }
  </code></pre>