Home arrow Web Standards arrow Matching div heights with CSS and JavaScript

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
  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

Matching div heights with CSS and JavaScript
(Page 1 of 4 )


CSS based design is really a powerful approach for most Web developers who consciously keep a website's contents separated from their visual presentation, which improves the site's overall maintenance and flexibility. Without a doubt, these virtues have provided designers with new possibilities for styling and positioning elements within Web documents very easily.

While tables still remain, for good compatibility reasons, the most used technique to define the layout of Web pages, <div> elements have gained considerable territory because they efficiently perform the same task. However, div-based layout exposes some undesirable artifacts when it is applied. Certainly, one of the most common pitfalls encountered when building up a two or more column liquid layout is the inability to give each general <div> containers the same height. It is desirable to achieve a consistent look, but also difficult, because of the dynamic nature of contents to be included in general <div> containers.  Due to this issue, many websites present layout columns with uneven heights, which looks very inconsistent to the eyes of visitors.

However, we can do much more to solve this problem. Over the course of this article, I'll show you a simple but powerful approach to match heights for general layout divs, thus eliminating that ugly effect that makes some sites appear quite unprofessional. Using CSS and JavaScript, we'll find a nice solution without feeling a sense of doom. So, it's time to move on and tame those wild divs!

blog comments powered by Disqus

- 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 

Developer Shed Affiliates


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