PDA

View Full Version : Two divs, same height



andyisan
03-27-2010, 02:52 AM
Suppose I have two divs that are floated so that they are next to each other. Most of the time, there's more text in the left div (Red #1) so there's whitespace below the right div (Blue #2). Sometimes, the reverse is true: the blue right div has more text causing whitespace under the red left div.

What script could I use to make sure that the height of the shorter div is made equal to the height of the longer div to get rid of the whitespace?

http://img28.imageshack.us/img28/4576/evendivs.png

djr33
03-27-2010, 02:54 AM
The basic way to do this is to create a surrounding element (div probably) that then allows you to set the inner elements at 100% height using CSS. In reality, though, this can be complex sometimes. In theory, no Javascript should be required.
Is this a general question, or can you post a link to the page for specific help?

andyisan
03-27-2010, 03:44 AM
The basic way to do this is to create a surrounding element (div probably) that then allows you to set the inner elements at 100% height using CSS. In reality, though, this can be complex sometimes. In theory, no Javascript should be required.

I'm not sure how that would be done via CSS... How do you set the height of one class to be equal to that of another class that has greater height, and vice versa?


Is this a general question, or can you post a link to the page for specific help?

General question for specific problem :-) Local only, here's the code:


<html>
<head>
<style>

.leftcol {
width: 200px;
float: left;
background-color: red;
color: white;
}

.rightcol {
width: 200px;
float: left;
margin-left: 5px;
background-color: blue;
color: white;
}
</style>
</head>

<body>

<div class="leftcol">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin cursus nisi convallis placerat. In hac habitasse platea dictumst. Proin et diam eu libero fermentum dictum. Sed vestibulum posuere venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi nulla est, iaculis id tristique a, bibendum ac est. Praesent volutpat dignissim mi, id consequat turpis convallis sed.</div>

<div class="rightcol">Lorem ipsum.</div>

</body>
</html>

I'd want the right col (the red area) to have as much height as the blue area, ie the red should be as high as the blue, and vice versa.