Css 2 Div Size Auto Same Height

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 con

Solution 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;
}​

Solution 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

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

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

Solution 3:

Ideally you'd set a min-height on both cells, or as the answer by @Taeeril correctly suggest use javascript to equal out the heights.

Here is a solution using table display types http://jsfiddle.net/SebAshton/Pj7gy/

Solution 4:

Better solution use both javascript and css.

http://codepen.io/micahgodbolt/pen/FgqLc