title: Aligning Divs with CSS
body: <p>I know there are tons of articles all over Google on doing something similar to this, but the problem is that they all vary on the implementation. What I'd basically like to do is have a single div of a fixed width be aligned to the center of my page, with bars on the side stylable to whatever I'd like. In Flex (MXML), I could easily make this happen with something like this:</p>
  
  <pre><code>&lt;mx:HBox width="100%"&gt;
    &lt;mx:VBox id="sideBarLeft" width="100%"/&gt;
    &lt;mx:Panel id="content" width="500"/&gt;
    &lt;mx:VBox id="sideBarRight" width="100%"/&gt;
  &lt;/mx:HBox&gt;
  </code></pre>
  
  <p>This would give me a design that looks like this:</p>
  
  <pre><code>[sideBarLeft][content][sideBarRight]
  </code></pre>
  
  <p>The sidebars would expand as the screen area grows, but the content would stay the same, 500px wide. </p>
  
  <p>How would I achieve this in HTML with divs and CSS? 
  Also, is there a way to set the minimum width of the sidebars? Ie: a size that they couldn't shrink below? (for example: &lt;mx:VBox id="sideBarLeft" width="100%" minWidth="150"/&gt;)</p>
  
  <p>And I apologize for the nature of how much of a novice I am at this stuff. I guess I've spent too much time building applications and too little time with HTML and CSS :)</p>