div height based on another div height

Question

I have 3 columns theme and I would like to have all columns same height. Height of column left and right are fixed and should be the same as dynamic height column middle.

layout code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en-US">
    <head>
    <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <div id="container">
            <div id="sidebar-left">Sidebar left</div>   
            <div id="sidebar-middle">BIG SIDEBAR MIDDLE</div>  
            <div id="sidebar-right">Sidebar right</div> 
        </div>
    </body>
</html>

'

CSS code:

html,
body {
    height:100%;
    background:#FFEE33;   
}
#container {         
    min-height:100%;
    background:#FFAA00; 
}           
#sidebar-left,
#sidebar-right{   
    float:left;
    width:33%;
    min-height:100%; 
    background:#FF0000;
}  
#sidebar-middle {  
    float:left;
    width:33%;
    height:2000px;
    background:#444;
}

Is this possible to make only in CSS? Appreciate any help.

[http://stackoverflow.com/questions/2715360/html-css-set-div-to-height-of-sibling](http://stackoverflow.com/questions/2715360/html-css-set-div-to-height-of-sibling) — Morpheus, Jan 14 '13 at 16:30

Drew Dahlman · Answer 1 · 2013-01-14T16:44:41.473

try adding a clearfix after your columns. This should force the container to size according to its contents. When you float elements they loose their height values - by adding a clear after a list of floated elements they regain this property.

simple -

add to css

.clearfix{
  clear: both;
  position: relative;
}

and html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en-US">
    <head>
    <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css" type="text/css">
    </head>
    <body>
        <div id="container">
            <div id="sidebar-left">Sidebar left</div>   
            <div id="sidebar-middle">BIG SIDEBAR MIDDLE</div>  
            <div id="sidebar-right">Sidebar right</div> 
            <div class="clearfix"></div>
        </div>
    </body>
</html>

That should get you pointed in the right direction.

You can't set class like this `
`, should be `
`, and change to `
` as you are adding style to `clearfix` class, not to `clear`. And will not help anyway :) — Morpheus, Jan 14 '13 at 16:24

div height based on another div height

1 Answers1