0

I have 2 DIVs:

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

How would i make the sidebar div stretch the same height as the content.

Thanks for any help.

UPDATE:

Here is my example code with other elements:

http://tinkerbin.com/tkp2FZLZ

it has a content DIV in the Middle and 4 divs that makes border which is a different color.

Sebastian Opperman
  • 241
  • 1
  • 7
  • 18

4 Answers4

0

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.

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
  • Thanks for the answer, does this method fully support older versions of IE? – Sebastian Opperman Jul 06 '12 at 09:26
  • I edited my answer with support for IE6/7 (inline-block and faux-columns, depends if you want the exact same result on IE6 and modern browsers and if fixed widths is an option or not. IMHO having 2 columns but some bugginess with backgrounds is enough with IE7-. The text is at the same place and that's the important part. – FelipeAls Jul 06 '12 at 10:07
0

try this 

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

     <div id="sidebar">
     <div id="content">
     </div>
     </div>
Avinash
  • 1,935
  • 7
  • 29
  • 55
0

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

Shailender Arora
  • 7,674
  • 2
  • 31
  • 35
-1

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

menislici
  • 1,149
  • 5
  • 18
  • 35