How do I keep two divs that are side by side the same height?
Question by SLC
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>
Answer by mqchen
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.
Answer by Starx
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
