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

Question

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/

Answer 1

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.

Answer 2

You can also try below code
CSS goes here
#container {
border:1px dashed #000;
overflow:hidden;
}
#content, #sidebar {
float:left;
width:50%;
}
#content {
background:yellow;
}
#sidebar {
background:grey;
}
#Container
{
height: auto;
width: auto;
}
and update HTML as follows,
<div id="Container">
<span id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>
</span>
<span id="sidebar">
<p>Few words</p>
</span>
</div>

Answer 3

It can be solved with
#content, #sidebar {
display: table-cell;
width:50%;
}

Answer 4

.table {
display:table;
}
.row {
display:table-row;
}
.one {
width:200px;
border:1px solid #333;
display:table-cell
}
<div class="table">
<div class="row">
<div class="one">gfhgfhgfhgf</div>
<div class="one">gfhgfhgfhgf</div>
</div>
</div>

Answer 5

Just use this code before the container closing Div, works for me!
<p style="clear:both;"></p>

Answer 6

Here's the simplest and most elegant solution:
#container {
display:grid;
grid-auto-flow: column;
}