Matching div heights with CSS and JavaScript
(Page 1 of 4 )
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.
Introduction
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!
Next: The kingdom of non-matching heights >>
More Web Standards Articles
More By Alejandro Gervasio
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 34 
