Question

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

Answer 1

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>