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.
Post a Comment for "Css 2 Div Size Auto Same Height"