Originally Posted by
djr33
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?
Originally Posted by
djr33
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:
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.
Junior Coders
Two divs, same height
Posting Permissions
Reply With Quote
Bookmarks