views:

344

answers:

9

I have two divs side by side. I'd like the height of them to be the same, and stay the same if one of them resizes. I can't figure this one out though. Ideas?

Edit: Here's a mockup I did in notepad:

Edit: Updated to try the link suggested below, but still no luck.

Edit: To clarify my confusing question, I'd like both boxes to always be the same size, so if one grows because text is placed into it, the other one should grow to match the height.

<div style="overflow: hidden">

<div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">

Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>

</div>

<div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px">

Some content!

</div>

</div>
+2  A: 

This is a common problem which many have encountered, but luckily some smart minds have posted their solutions online: Ed Eliot's blog, One true layout

Basically what you do is make both divs/columns very very tall by adding a padding-bottom: 1000px and then "trick the browser" into thinking they aren't that tall using margin-bottom: -1000px. It is better explained by Ed Eliot on his blog, which also includes many examples.

Here's an example for you.

mqchen
That looks like the problem, I have tried to implement what he said, but it has not worked. I've edited my example to show what I have tried.
SLC
I added an example in my answer. Maybe the problem in your case is caused elsewhere?
mqchen
This is a dirty little trick to get the job done. I don't recommend it
Starx
Explanation on One True Layout was a bit poor, but after checking the first link I implemented it fine from one of the examples he used. However it's really bad because you have to use an image to represent the bottom border of the columns, and it's dubious for cross-browser support. However it does work and it doesn't rely on javascript, so I'm going to mark it as correct. Thanks!
SLC
@mq.chen: +1 thanks Ed Eliot's blog very interesting link!
Marco Demajo
A: 
<div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>

</div>

<div style="border:1px solid #cccccc; float:left; min-height:200px;">

Some content!

</div>

</div>

What I did here is to change the height to min-height and gave it a fixed value. if one of them is getting resized the other one will stay the same height. not sure if this is what you want

Wai Wong
A: 

This is an area where CSS has never really had any solutions — you’re down to using <table> tags, as that’s the only place where a “keep a bunch of elements the same height” was implemented.

I think this will work in some browsers, but please edit this answer to add details of browser support and/or point out how utterly wrong I am (I’m not very familiar with this area).

<div style="display: table-row;">

    <div style="border:1px solid #cccccc; display: table-cell;">
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
        Some content!<br/>
    </div>

    <div style="border:1px solid #cccccc;  display: table-cell;">
        Some content!
    </div>

</div>
Paul D. Waite
+1  A: 

You can use Jquery's Equal Heights Plugin to accomplish, this plugins makes all the div of exact same height as other. If one of them grows and other will also grow.

Here a sample of implementation

Usage: $(object).equalHeights([minHeight], [maxHeight]);

Example 1: $(".cols").equalHeights(); 
           Sets all columns to the same height.

Example 2: $(".cols").equalHeights(400); 
           Sets all cols to at least 400px tall.

Example 3: $(".cols").equalHeights(100,300); 
           Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.

Here is the link

http://www.cssnewbie.com/equalheights-jquery-plugin/

Starx
A: 

What is so wrong with using < table >? Keeping two things of the same height side by side is what tables do...

Arkadiy
the problem with relying on tables for layout is that it joins the content and the style... which is problematic for adjusting/adapting/changing styles.
Derek Adair
In this case, table is a pure style device. I can see how changing that style is a problem, but looks like the alternative solution is an ugly hack, requiring an image (a content element) to achieve the needed style.
Arkadiy
A: 

you can use jQuery to achieve this easily.

CSS

.left, .right {border:1px solid #cccccc;}

jQuery

$(document).ready(function() {
    var leftHeight = $('.left').height();
    $('.right').css({'height':leftHeight});
});

HTML

   <div class="left">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>
   </div>
   <div class="right">
    <p>Lorem ipsum dolor sit amet.</p>
   </div>

You'll need to include jQuery

pixeltocode
+1  A: 

Using Javascript

using jquery you can do it in a super-simple-one-line-script.

//HTML
<div id="columnOne">

</div>
<div id="columnTwo">

</div>

//javascript
$("#columnTwo").height($("#columnOne").height());

Using CSS

This is a bit more interesting. The technique is called Faux Columns. More or less you don't actually set the actual height to be the same, but you rig up some graphical elements so they LOOK the same height.

Derek Adair
A: 

What I did (for php) -won't work you for probably...

I had two divs:

One which echo'd some php stuff, One which echo'd some other php stuff' -looked better (/filled page better) with two divs..

the way I fixed it -if one div was bigger than another... was to work out how much was in the left div and buffer the right :)

jaij
I was thinking that I could display the same extra content in both divs, but hide it in the second div... sadly it won't work in the case I'm doing at the moment though!
SLC
+2  A: 

The technique you are really looking for is Faux Columns.

Basically it uses a background image in a containing DIV to simulate the two equal-height-DIVs. Using this technique also allowes you to add shadows, rounded corners, custom borders or other funky patterns to your containers.

Only works with fixed-width boxes though.

Well tested out and properly working in every browser.

Arve Systad