Home arrow Web Standards arrow Page 3 - 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 - 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.


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