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

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/

Im not sure if you want it as pure CSS but i made a version with jQuery for you: http://jsfiddle.net/yJbUW/1/ — andershagbard, Nov 29 '13 at 12:24
Nice solution @andershagbard, however also solvable with CSS. Check my answer. — GreyRoofPigeon, Nov 29 '13 at 12:27

score 8 · Accepted Answer · answered Nov 29 '13 at 12:25

8

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.

answered Nov 29 '13 at 12:25

GreyRoofPigeon

17,833
4
36
59

Nowadays you would fix this with Flexbox! – GreyRoofPigeon Nov 17 '22 at 10:13

score 1 · Answer 2 · answered Nov 29 '13 at 12:30

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>

score 0 · Answer 3 · answered Nov 29 '13 at 12:27

0

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

answered Nov 29 '13 at 12:27

8f7ca04d817b1696

644
5
13

score 0 · Answer 4 · edited Nov 29 '13 at 15:02

0

.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>

edited Nov 29 '13 at 15:02

GreyRoofPigeon

17,833
4
36
59

answered Nov 29 '13 at 12:31

Bipin Kumar Pal

1,009
2
8
16

score 0 · Answer 5 · answered Nov 04 '15 at 17:47

0

Just use this code before the container closing Div, works for me!

<p style="clear:both;"></p>

answered Nov 04 '15 at 17:47

Hashim

1
1

score 0 · Answer 6 · answered Feb 06 '23 at 19:32

0

Here's the simplest and most elegant solution:

#container {
display:grid;
grid-auto-flow: column;
}

answered Feb 06 '23 at 19:32

philo22

1

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

6 Answers6

Linked