Sidebar height stretch with the content height CSS

Question

I have 2 DIVs:

How would i make the sidebar div stretch the s

Answer 1

Use display: table-cell on both column.

That will (visually! and visually only. It's CSS) make them behave the same way as th/td cells. You can add table-layout: fixed; display: table on parent and some width on one or both columns to use the other table algorithm, the one that doesn't try to adapt to content but try to respect the widths YOU want.

HTML:

<div id="sidebar"></div>
<div id="content">typo in your code, an =" was removed</div>

CSS:

#sidebar, #content {
  display: table-cell;
}

EDIT: compatible with IE8+
You'll have to use inline-block for IE6/IE7 ... that they don't understand (ha!). display: inline; zoom: 1 is the alternative for them, or you can also float these columns and use a technique named faux-column (tl;dr the background is on the parent and it's a visual fake, it appears to be on each column but it isn't)
EDIT2: vertical-align: top is also often required for such layout columns.

Answer 2

Set the same height for them, you could possibly even give them a float. By the way you have a bug in your html, write it like so:

<div id="sidebar"></div>
<div id="content"></div>​

And the css:

#sidebar{
width: 40px;
height:350px;
float: left;
margin-left: 10px;
border: 1px solid red;
}

#content{
width: 165px;
height:350px;
float: left;
margin-left: 10px;
border: 1px solid blue;
}

​ Example

Answer 3

You can easily get your desired results through display:table-cell;

HTML

<div id="sidebar">sidebar</div>

<div id="content">content</div>

CSS

#sidebar {
display:table-cell;
width:100px;
background:red;

}
#content {
display:table-cell;
width:100px;
background:yellow;
height:200px;
}

i think you are looking like this ;- http://tinkerbin.com/yqyX3mXg

Answer 4

try this

     #sidebar { position: relative; }
     #content { position: absolute; top: 0; bottom: 0; right: 0; }

     <div id="sidebar">
     <div id="content">
     </div>
     </div>