Home arrow Web Standards arrow Page 2 - Matching div heights with CSS and JavaScript
WEB STANDARDS

Matching div heights with CSS and JavaScript


It's not unusual for the layout of a Web page to feature multiple columns. Unfortunately, when creating this layout while using general <div> containers, you can end up with columns of uneven height, depending on their content. This looks very unprofessional. Alejandro Gervasio explains a way to keep your column heights even using CSS and JavaScript.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 60
March 14, 2005
TABLE OF CONTENTS:
  1. · Matching div heights with CSS and JavaScript
  2. · The kingdom of non-matching heights
  3. · More non-matching heights just around the corner
  4. · The JavaScript solution

print this article
SEARCH DEVARTICLES

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.


blog comments powered by Disqus
WEB STANDARDS ARTICLES

- Mozilla Popcorn Maker 1.0 Makes Videos More...
- Completing a Configuration for Chrome and a ...
- Getting Connected with Firefox and Chrome
- Configuring Servers and Databases with Chrome
- Configuring Firefox for Chrome and a Server
- Designing the Elements of a Web Page
- Matching div heights with CSS and JavaScript
- Forms
- Get Down With Markup
- If I Said You Had a Beautiful Body...
- Web Standards in Dreamweaver Part 3
- Web Standards in Dreamweaver, Part 2
- Web Forms
- Making Lists Using XHTML
- Web Standards in Dreamweaver, Part 1

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials