Auto Stretching Vertical Columns (divs)

check this fiddle please: I want the following: the red column has some text, the yellow is the dynamic content, the green has nothing, just a color. I want both red and green colu

Solution 1:

You can use negative margins to achieve the result

The floating divs should be wrapped in a container with overflow:hidden This is the fiddle This is the code

#container {
    overflow:hidden;
}

#containerdiv {
    padding-bottom:2000px;
    margin-bottom:-2000px;
}

Solution 2:

Working Demo

Not an easy solution but it works:

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

Got it from here

Solution 3:

Try using a list instead. You can display it as a table-row and the list-items as table-cells what makes all the list-items have the same height.

jsFiddle:

http://jsfiddle.net/Q7MFX/4/

Code:

<ulstyle="list-style:none;padding:0;display:table-row"><listyle="display:table-cell;background-color: red;">11<br>11<br>11<br></li><listyle="display:table-cell;background-color: yellow;">22342<br>dsfsdf<br>sdfs df<br>v sdfsdf s dffffffffffffffff</li><listyle="display:table-cell;background-color: green; width: 40px;">11</li></ul>

Solution 4:

You can use Jquery

http://jsfiddle.net/9XVSr/

html:

<divclass="col"id="col1"style="background-color: red; float: left">11<br>11<br>11<br></div><divclass="col"id="col2"style="background-color: yellow; float: left">22342<br>dsfsdf<br>sdfs df<br>v sdfsdf s dffffffffffffffff</div><divclass="col"id="col3"style="background-color: green; width: 40px; float: right">11</div>

Jquery

$(document).ready( function() {
maxcol = Math.max($('#col1').height(),$('#col2').height(),$('#col3').height());
$('.col').height(maxcol);    
});