Geek asks and answers

CSS 2 div auto size same height

I have a question in CSS:

How can i do this:

CSS Auto width

When the green div has a (auto) height of 500 pixels for the content, the red color becomes the same.

And when the red (auto) height is 700 pixels for the content, the green color becomes the same.

Both have any content, then I use auto height.

So, how can I make green the same width as red and red, but with different content with "height: auto" ??

+3
source share
4 answers

I would just wrap both DIVS, inside another div, and let them grow on the parent DIV, and 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>

http://www.ejeliot.com/blog/61

+1

. :

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;
}​
+5

Ideally, you set the minimum height on both cells or, as the answer from @Taeeril, correctly suggest using javascript to level the heights.

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

0
source 
Better solution use both javascript and css.

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

0
source

More articles:


All Articles