Question

I have multiple div tags:

The main div that holds the content, if the content gets bigger, the height will obviously get bigger too, but the other divs don’t.

How do I make the other divs take the main div’s height?

Code

<div id="container">
    <span id="header">Fiction Tools</span>
    <span id="paragraph">Lots of text will be in this text box, 
    describing in great detail the awesomeness of Fiction Tools 
    and it’s capabilities. Fiction Tools is known for lots of 
    awesome things, here are a few:</span>
    <ul id="lists">
        <li>We have this awesome design made by Driptone.</li>
        <li>Did I mention, the design is awesome? Well, it is.</li>
        <li>You should be reading this in the voice of Morgan Freeman.</li>
        <li>In a galaxy, far, far away...</li>
    </ul>
    <span id="secondparagraph">Be sure to check out our latest 
    deals which can be found on our Twitter and Facebook profiles 
    for more updates! For any other updates, you can look at our 
    news feed to the right of your screen or tablet.</span>
    <br />
    <div id="first"></div>
    <div id="second"></div>
</div>

CSS

#container {
    border: 1px solid #aaa;
    width: 768px;
    min-height: 200px;
    background: white;
    position: absolute;
}

#first{
    border: 1px solid #aaa;
    width: 768px;
    min-height: 200px;
    background: white;
    position: absolute;
    top: 3px;
    left: 3px; 
    z-index:-1;
}

#second{
    border: 1px solid #aaa;
    width: 768px;
    min-height: 200px;
    background: white;
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: -2;
}

#header {
    position: relative;
    font-size: 24px;
    font-weight: bold;
    color: #404040;
    padding: 25px;
    top: 15px;
}

#paragraph {
    position: relative;
    font-size: 12px;
    color: #8f8f8f;
    padding-left: 25px;
    padding-top: 20px;
    display: block;
}

#secondparagraph {
    position: relative;
    font-size: 12px;
    color: #8f8f8f;
    padding-left: 25px;
    padding-top: 7px;
    display: block;
}

#lists {
    position: relative;
    padding-left: 25px;
    padding-top: 10px;
}

Currently it looks like this:

As you see the div that holds the content gets the height, but the others don’t.
Any ideas?

Answer 1

Did you try making the height 100%:

http://jsfiddle.net/egjUZ/

#first{
        border: 1px solid #aaa;
    width: 768px;
    min-height: 200px;
    background: white;
    position: absolute;
    top: 3px;
    left: 3px; 
    z-index:-1;
    height: 100%;
}
#second{
    border: 1px solid #aaa;
    width: 768px;
    min-height: 200px;
    background: white;
    position: absolute;
    top: 6px;
    left: 6px;
    z-index:-2;
    height: 100%
}