Matching div heights with CSS and JavaScript - The kingdom of non-matching heights
(Page 2 of 4 )
Say we've set up a generic three-column layout for Web pages, which suits our needs for displaying some dynamic content. We might start writing the code for doing that, defining the basic CSS styles and markup, respectively:
<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: 0;
}
#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 />
Content goes here...
</div>
<div id="rightcol">
Right Section<br />
Content goes here...
</div>
<div id="content">
Content Section<br />
Content goes here...
</div>
</body>
</html>
As we can see in the above example, a simple three-column layout has been defined using the "float" property to properly position each container <div> element in the document. Following the document structure, the "leftcol" <div> element is floated to the left side, the "rightcol" <div> is similarly floated to the right side, and finally, in a similar fashion, the "content" <div> has been floated to the left, sticking to the "leftcol" <div> element, being displayed nearly the center of the screen. Also, widths for each element have been defined by percentages. It's simple enough and effective to use in liquid designs.
Although we've used floating boxes to achieve the general page layout, other techniques are perfectly valid, such as using absolute positioning and margin specifications. At this point, we have a good three-column design in which each column has the same height. Of course, this case is not a real representation of most Web pages out there. What if we start adding more content to, for example, the left positioned column and a little more to the content <div>? We might see something similar to the code shown below, derived from the initial example:
<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...
</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...<br />
Content goes here...<br />
Content goes here...<br />
Content goes here...
</div>
</body>
</html>
This spoils the party! As we can appreciate, heights for each <div> element won't be the same and columns will be unequally displayed. We might end up with a visual output like this:
Certainly, this is not what we want for our rendered Web pages, right? Those <div> elements are causing big headaches, and making our pages look pretty unprofessional. What's more, other possible variations to the example might be feasibly implemented. Let's see them in turn, in order to illustrate each of them.
Next: More non-matching heights just around the corner >>
More Web Standards Articles
More By Alejandro Gervasio
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 34 
