How do I set a div's height the same as another div ?

OK, here is the story :

I got 2 div's ( content and column )

Content is left and column is right. Now the problem is content is bigger in height, because there is more text in it. How do I give the column the same height without giving it a height in pixels, so it stretches with the text ?

 

CSS DIV 100% Height problem


I wrote an article about it a while ago. This is a fix with JavaScript...

Nima

 

The link to the actual JS doesn't work for me....
All I see is a polar bear in a blizzard.

 

http://www.projectseven.com/tutorials/css/pvii_columns/index.htm

That site will also teach you how to do what you're looking to do with javascript, and I believe that site works.

 

Are you talking about my article? Its working fine for me.

 

Use the min-height property on the DIV thats shorter in height.

Detailed explanation with example here.

Hope it helps.

 

I just use tables, it's the best solution (I don't understand the whole div layout problem, search engines have gone a long way since old days and almost every browser reads the tables in the same exact way). But anyway, like already stated, you may solve the problem with JavaScript since most CSS solutions may give the result on some browsers and on others may not. I know this is the CSS forum but here's a short JS example:

document.getElementById('target').style.height = document.getElementById('source').style.height

Code (markup):

Hope it helps, good luck!

 

The faux column technique seems to be what you are looking for :
http://www.alistapart.com/articles/fauxcolumns/

 

Got it, heres your solution ›› http://www.456bereastreet.com/lab/equal_height/

 

Using JS for that is lame. Most of the time faux columns will do.