Matching div heights with CSS and JavaScript - More non-matching heights just around the corner
(Page 3 of 4 )
Based on the previous examples, suppose we need to add more content to the left column of the Web document, while the content <div> maintains its original height. This simple code will do the trick:
<html>
<head>
<title>THREE-COLUMN LAYOUT</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
margin: 0px;
}
#leftcol {
background: #ccf;
float: left;
width: 17%;
}
#content {
width: 65%;
float: left;
background: #ccf;
}
#rightcol {
float: right;
width: 17%;
background: #ccf;
}
</style>
</head>
<body>
<div id="leftcol">
Left Section<br /><br />
Content goes here...<br />
Content goes here...<br />
Content goes here...<br />
Content goes here...<br />
Content goes here...<br />
Content goes here...
</div>
<div id="rightcol">
Right Section<br /><br />
Content goes here...
</div>
<div id="content">
Content Section<br /><br />
Content goes here...<br />
Content goes here...
</div>
</body>
</html>
Once again, unfortunately, <div> elements will be unequally displayed in the document, resulting in the following undesirable visual output:
The last remaining case to be analyzed, which certainly would render non-matching <div> heights for the Web document's columns, will occur when additional content is included in the right column. This situation might be represented with the following code, based on the previous examples:
<html>
<head>
<title>THREE-COLUMN LAYOUT</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
margin: 0px;
}
#leftcol {
background: #ccf;
float: left;
width: 17%;
}
#content {
width: 65%;
float: left;
background: #ccf;
}
#rightcol {
float: right;
width: 17%;
background: #ccf;
}
</style>
</head>
<body>
<div id="leftcol">
Left Section<br /><br />
Content goes here...<br />
Content goes here...
</div>
<div id="rightcol">
Right Section<br /><br />
Content goes here...<br />
Content goes here...<br />
Content goes here...<br />
Content goes here...<br />
Content goes here...<br />
Content goes here...
</div>
<div id="content">
Content Section<br /><br />
Content goes here...
</div>
</body>
</html>
As we've done with the above samples, the visual output for this code is illustrated below:
Consciously, we've taken a detailed look at the most common cases where the columns and content sections are displayed with different heights, according to the content that each element should contain. Indeed, the problem must be quickly tackled, preventing its ugly side effects, when we're utilizing <div> elements for page layout. So, how can we make column heights match properly, showing a very polished and consistent look, independently from the content generated? Fortunately, the answer is quite simple: a JavaScript function that will set <div> heights to the same value, achieving the desired matching height. Now, let's take a look at the JavaScript code.
Next: The JavaScript solution >>
More Web Standards Articles
More By Alejandro Gervasio
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 34 
