Sidebar grows up together with the content

Question

I created this sample. I am trying to make the content (head and body ids) and the sidebar the same height. Do you have any suggestions how can I do it? I tried height: 100% in the sidebar, but I guess I'm missing something here.

Answer 1

Try to set some height to the #wrap div eg. min-height: 500px; and than set content and sidebar to height: 100%; - that should do the trick. -- oh, I see you have two more divs in the content div, you need to set their width as well then.

Answer 2

I feel you should go with js solution equal_heights

although there is several discussion held on same problem

HTML/CSS: Making two floating divs the same height

How do I keep two divs that are side by side the same height?

How to make floating inner divs the same height as the highest div

Answer 3

Insert the [height:] in wrap div and right div will be with full height of the body

Answer 4

According to this answer, modify your CSS like this:

Add these to #wrap:

overflow: hidden;
position: relative;

And these to #sidebar:

height: 100%;
position: absolute;
right: 0;

Also here is the demo.

CSS

#wrap {
   margin: auto;
   width: 400px;
   overflow: hidden;
   position: relative;
}

#sidebar {
   float: right;
   width: 100px;
   background: red;
   height: 100%;
   position: absolute;
   right: 0;
}

#content {
   float: left;
   width: 300px;
}

#head {
   background: green;
   color: #000;
}

#body {
   background: #000;
   color: #FFF;
   min-height: 300px
}

HTML

<div id="wrap">
    <div id="sidebar">
        <ul>
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
    </div>

    <div id="content">
        <div id="head">Hello</div>
        <div id="body">World</div>
    </div>
</div>