title: CSS Center Element in 3 Column Layout
body: <p>So I have a 3-column layout on my webpage, but I can't get the things in the middle column to be centered.  The columns on the left and right are of fixed width, so I created a container for the middle column and set its borders to equal the size of the left and right columns.  Then, I used the margin:auto property on the div tag inside the middle container that has everything that I want in the middle column.  If possible, I want this to work on all browser window sizes. This is my CSS:</p>
  
  <pre><code>
  #top
  {
      width:100%;
      background-color:#FF0000;
      height:30px;
      overflow: auto;
      width: 100%
  
  }
  
  
  #right
  {
      float:right;
      width:100px;
      background-color:#CCC;
      height:100%;
  }
  
  #middleCont
  {
      margin-left:150px;
      margin-right:100px;
  }
  
  #middle
  {
      margin:auto;
      text-align:left;    
  }
  
  
  #left
  {
      float:left;
      width:150px;
      height:100%;
  
  
  }
  
  
  </code>
  
  </pre>
  
  <p>And since I can't post html without the browser rendering it for some reason, I uploaded the relevant code in a text file: <a href="http://www.mediafire.com/?a89kr1bb4uwb4cf" rel="nofollow">http://www.mediafire.com/?a89kr1bb4uwb4cf</a></p>
  
  <p>Thanks in advance for the help.</p>