Equal height columns in CSS
To achieve equal height columns using <table> in html is very easy, it is directly supported. However in CSS world, how can we create 2 equal height columns using <div> tag and applying CSS to decorate?
Let’s create a HTML file with a container and 2 columns:
<html>
<head>
<style type="text/css">
.decorate { float: left; background: #000; color: #fff; width: 100px; margin-right: 10px;}
</style>
</head>
<body>
<div class="container">
<div class="container">
<div class="column decorate">
dgd digjifjg iodjgiof fdu ghfd ghofh gidfhg ihfg ihdfi
</div>
<div class="column decorate">
dgd digjifjg iodjgiof
</div>
</div>
</div>
</body>
</html>
In the above html, it results in following output:
Now we fix it by applying “container” and “column” class in CSS:
.container { float: left; overflow: hidden; }
.container .column { margin-bottom: -5000px; padding-bottom: 5000px; }
The page will result in 2 equal height columns
It works in IE 6, 7, Firefox and Safari.