How do you overlay two divs and make them the same height?

I am trying to make a content div similar to twitter which, next to it, has a sidebar that seems to be overlayed. How can I achieve t开发者_JAVA技巧his using css?

One technique to archive this is called faux columns. Take a look... http://www.alistapart.com/articles/fauxcolumns/

Maybe otherwise you can work with min-height/max-height

The most common method for creating a sidebar that is always the same height as the content area is essentially creating a 'fake' or faux sidebar. Here's an example:

<div id="wrapper">

     <div id="content">
          <p>My Content</p>
     </div>

     <div id="sidebar">
          <p>Sidebar</p>
     </div>

</div>

Your stylesheet would look something like this:

#wrapper {
     background: url(faux_sidebar.jpg) top right repeat-y;
}

#sidebar {
     float:right;
     width:200px;
}

The image faux_sidebar.jpg would be the same width as the sidebar (maybe a bit wider for some padding). The idea is that the background of #wrapper is an image which IS the background of the sidebar. The sidebar then floats next to the content like normal, and because #wrapper will expand to accommodate the taller of its two children, the sidebar will always be the same height as the content.

I prefer this:

HTML:

<div class="surround">
    <div class="main">
        <br /><br />
        <br /><br />
        <br /><br />
        <br /><br />
        <br /><br />
        <br /><br />
    </div>
    <div class="side">
        /* allways the same height like main */
    </div>
</div>

CSS:

.surround
{
    display: table;
    width:900px;
    min-height:200px;
}

.main{
    display:table-cell;
    width:600px;
    min-height:200px;
    background-color:blue;
}
.side{
    display:table-cell;
    width:300px;
    min-height:200px;
    background-color:red;
}