How to make sidebar with same height as the content div?

css, height

Solution

You can do that by displaying the `#container` as table and displaying `#content` and `#sidebar` as table-cells:

#container {
    border:1px dashed #000;
    display: table;
    width: 100%;
}
#content, #sidebar {
    display: table-cell;
    width:50%;
}

Check your updated Fiddle.

Problem

the code is the following: (CSS) ``` #container { border:1px dashed #000; overflow:hidden; } #content, #sidebar { float:left; width:50%; } #content { background:yellow; } #sidebar { background:grey; } #sidebar { height:100%; } ``` (HTML) ``` <div id="container"> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p> </div> <div id="sidebar"> <p>Few words</p> </div> </div> ``` I would like to see a `#sidebar` div with same height, like the `#content` div, is it possible without absolute position? Online version: http://jsfiddle.net/yJbUW/

Original source