Same height CSS Columns
By default CSS coders can not make same height columns with CSS in their web pages. This is annoying when we develop web pages with CSS. If you involve in developing or designing web pages you might encounter with this issue. In CSS we can not make same height columns unless giving the exact height in pixels. But there are situations that web developer can not give exact height to columns.
Here is a normal example of columns designed with CSS:
You can see that above two columns are not equal height even they containing within one main container (main ‘div’).
However we can easily use tables to make same height columns. creating web sites with tables are however not acceptable by XHTMl and manipulating with tables tricky. So we avoid tables to design web pages.
OK, let’s see how we can make same height columns using CSS.
There are few methods and hacks that you can apply. But my most favorable and effective method is using a handy javascript code written by Paul. Get the javascript snippet here (columns.js). The web site provides how to use javascript code to make same height columns in CSS.
Another method is using faux columns. It’s all about playing with colors and cheating visitors. you can add a small vertically repeated background image to main ‘div’ and using a clearing effect. Read more about faux columns.
But javascript method is welcomed by many web designers who create web sites with validated XHTML.
0 comments
Kick things off by filling out the form below.
Leave a Comment