HTML/CSS: How to make the sidebar and content follow each other

I need a sidebar and a content area. I want to have equal height for both sections. So if I want to specify a background color for the sidebar, it will follow th开发者_Python百科e content area even if the sidebar's contents are not as tall as the content section and vice versa. I want to make this in pure HTML and CSS only, so no javascript tricks.

This excellent article on A List Apart builds such a layout from scratch, and also contains some interesting links to other articles on the subject, such as Faux Columns (also on ALA).

The only real way of doing this in a cross browser fashion is with tables.

As content is added to the sidebar cell below, it will force the entire row to expand which in turn will force the contentArea cell to expand as well. You can style those individually with css.

<style>
  #sideBar { vertical-align:top;}
  #contentArea { vertical-align:top;}
</style>
<table>
  <tr>
    <td id="sideBar">SideBar</td>
    <td id="contentArea">content area</td>
  </tr>
</table>

Basically just set the height of the sidebar to be 100% and it will follow the parent element's height. In the example below its the container element. No matter it's height, sidebar's height will be 100% and therefore always be same height as container.

<div id="wrapper">
  <div id="container">
      <div id="sidebar"></div>
  </div>
</div>

<style>
#wrapper {}
#container {min-height:500px;}  (or whatever you want for the height)
#sidebar {height:100%;}
</style>