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

Question

I need a sidebar and content area. I want to have equal height for both sections. Therefore, if I want to specify a background color for the sidebar, it will follow the content area, even if the content of the sidebar is not as high as the content area, and vice versa. I want to do this only in pure HTML and CSS, so no javascript tricks.

Answer 1

The only real way to do this in cross-browser mode is through tables.

As you add content to the side cell below, this will cause the entire row to expand, which in turn will cause the contentArea cell to expand as well. You can create them individually using 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>

Answer 2

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

Answer 3

100%, . . , 100% , .

<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>