CSS 2 div size auto same height

Question

i have an question in CSS:

How i can do that:

When the green div has (auto) 500px height for the content the red got the same.

And when the red has (auto) 700px height for the content the green got the same.

Both have any content then i use auto height.

So how i can do the green has the same width as red and red too but whit different content whit "height: auto;"?

Answer 1

First, read this excellent article. Then, check out the fiddle:

http://jsfiddle.net/UnsungHero97/qUT3d/

HTML

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

CSS

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}​

Answer 2

I would just wrap both DIVS, inside another div, and have them bump up on the parent DIV, then resize the parent

Something like this.... then use CSS to format them

<div id=parent>
    <div id=child>
      Content....
    </div>
    <div id=child>
      Content....
    </div>
</div>

some other solutions could be listed here http://www.ejeliot.com/blog/61