I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.
For example, the right div has a lot of content, and is double the height of the left div, how do I make the left div stretch to the same height of the right div?
Is there some JavaScript (jQuery) code to accomplish this?
Take a look at this link.
http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/
Well, I don't do a ton of jQuery, but in the CSS/Javascript world I would just use the object model and write a statement as follows:
if(leftDiv.style.height > rightDive.style.height)
rightDiv.style.height = leftDiv.style.height;
else
leftDiv.style.height = rightDiv.style.height)
You could use jQuery, but there are better ways to do this.
This sort of question comes up a lot.. and there are generally 3 answers
This is the 'best' way to do it, as it is the most semantically pure approach (without resorting to JS, which has it's own problems). In saying that, you need to insert a bunch of divs to get the pure CSS technique to work. You could also try using the faux background technique.
This works great, but at the expense of having an unsemantic layout. You'll also cause a stir with purists. I have all but avoided using tables, but they are easier to implement.
This benefits in having the most semantic markup, except with JS disabeld, you will not get the effect you desire.
simple ... use the class :)
<div id='myleft01' class='topOne'> .... </div>
<div id='myright01' class='topOne'>....</div>
.topOne{
height: 200px;
}
just an alternative, because jquery did the same thing .. they just add same height :) alternatively, you can add !important at height : 200px to make sure no other class override yours (topOne).
There's also a jQuery plugin called equalHeights that I've used with some success.
I'm not sure if the one I'm using is the one from the filament group mentioned above, or if it's this one that was the first google result... Either way a jquery plugin is probably the easiest, most flexible way to go.
Here's a way to do it with pure CSS, however, as you'll notice in the example (which works in IE 7 and Firefox), borders can be difficult - but they aren't impossible, so it all depends what you want to do. This example assumes a rather common CSS structure of body > wrapper > content container > column 1 and column 2.
The key is the bottom margin and its canceling padding.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal Height Columns</title>
<style type="text/css">
<!--
* { padding: 0; margin: 0; }
#wrapper { margin: 10px auto; width: 600px; }
#wrapper #main_container { width: 590px; padding: 10px 0px 10px 10px; background: #CCC; overflow: hidden; border-bottom: 10px solid #CCC; }
#wrapper #main_container div { float: left; width: 263px; background: #999; padding: 10px; margin-right: 10px; border: 1px solid #000; margin-bottom: -1000px; padding-bottom: 1000px; }
#wrapper #main_container #right_column { background: #FFF; }
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="main_container">
<div id="left_column">
<p>I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.</p>
</div><!-- LEFT COLUMN -->
<div id="right_column">
<p>I have two divs inside of a container. One on the left, one on the right, side by side. How am I able to make each one be of equal height, even though they have different content.</p>
<p> </p>
<p>For example, the right div has a lot of content, and is double the height of the left div, how do I make the left div stretch to the same height of the right div?</p>
<p> </p>
<p>Is there some JavaScript (jQuery) code to accomplish this?</p>
</div><!-- RIGHT COLUMN -->
</div><!-- MAIN CONTAINER -->
</div><!-- WRAPPER -->
</body>
</html>
This is what it looks like: http://discretiondev.com/images/EqualColumns.png
[ New user, not allowed to post image tags ]
I found this method to be the simplest and most effective of all equal-height two-column layouts for flexible heights on both columns. You don't have to fake anything, and it Just Works. It's pure CSS, no Javascript required, and allows you to use whatever borders and backgrounds you like without having to resort to images.
I've found that the majority of solutions are for the layout of webpages, but what if you have a 'grid' of boxes that wrap to a margin, e.g 3 rows of 4 boxes. How can you get them all to be the height of the largest box?
Sorry to hijack the discussion, but this driving me mad.
Best wishes and thanks,
Barton.
