ansaurus

Question

Answer 1

+1 A:

I can rack my brain all I want, but I think this can really be solved only using table behaviour, i.e. using <table>s (if you need to be IE6 and IE7 compatible) or display: table / table-row / table-cell (which is effectively the same thing but won't embarrass you in front of your peers because tables are evil. ;).

I'd go for a table.

Feel free to prove me wrong and post a sane CSS solution, I'd be delighted!

Pekka 2010-04-26 17:15:16

IE7 is out, too with "display: table"

tom 2010-04-26 17:22:02

@tom youre right, cheers. Edited.

Pekka 2010-04-26 17:33:23

I actually ended up going with a javascript solution...the page was already loading jquery, so it was trivial to add code to adjust the div heights...thanks anyway tho!

W_P 2010-04-28 13:57:38

Answer 2

+1 A:

I think you have these options:

faux columns - using a repeating background image for the container div to create the appearance of equal height
using a table
using javascript to adjust the div height
using a javascript to add css support to non-compliant browsers

tom 2010-04-26 17:19:07

I used faux columns : http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Fabian Brenes 2010-05-28 15:03:07

Answer 3

A:

In order to do this with HTML and CSS using divs, you will need to use JavaScript to check their heights, then change one to match.

If you don't want to use JavaScript, and your site has a particular design, in your third div, you can give it a repeat-y background image that will expand as one of the two divs does. So for example, say your two divs have a blue background, and your third containing div has a grey background. Remove the blue background and create an image that is repeatable using the blue and grey, and place that image for the third div. That way, as it expands, it will appear the two divs are as well.

Braxo 2010-04-26 17:20:29

Answer 4

A:

View this previous post. I have sample JQuery to enable the functionality...

http://stackoverflow.com/questions/2114757/css-equal-height-columns/2114778#2114778

Not all browser support CSS Tables go Javascript, unless your specifically targeting newer browsers, all depends...

Alexander 2010-04-26 17:20:51

Answer 5

A:

This will allow the right div's height to always be that of the left as left grows dynamically based on content, but the right will never grow larger than min-height if the left has less content, that may be acceptable for you:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
 <title>Matching Size Divs</title>
 <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
 <style>
    #main-container { position:relative; min-height:500px; }    
    #left-div { width:700px; min-height:500px; }      
    #right-div { position:absolute; margin-left:700px; width:248px; top:0px; bottom:0px; }    
 </style>
</head>
<body>
    <div id="main-container" class="border clearfix"> 
    <div id="left-div" class="border"> 
        ...
    </div> 
    <div id="right-div" class="border"> 
        ... 
    </div> 
</div>
</body>
</html>

David 2010-04-26 17:47:13

ansaurus

tags:

views:

answers:

HTML/CSS set div to height of sibling

related questions