Here I am going to explain you the steps to create equal height columns without using image.
1. First of all you need to create a container and two columns inside the container. Here is the code:
<div id=”container”>
<div class=”leftcol”>This is column 1</div>
<div class=”rightcol”>This is column 2</div>
</div>
____________________________________________
Now make overflow of container hidden in style sheet and set margin and padding large enough than the column matter height.
CSS code:
_____________________________________________
#container {
width:340px;
height:auto;
overflow:hidden;
}
#container .leftcol {
float:left;
width:160px;
padding-bottom: 30000px;
margin-bottom: -30000px;
}
#container .rightcol {
float:right;
width:160px;
padding-bottom: 30000px;
margin-bottom: -30000px;
}
Above code will give you two equal height columns
This is a (stupid?) question, but where do you place the content?
Thanks!
It’s a good hack, thank you. Sometime you need more fantasy than technical knowledge…
I’ve just tried it on Firefox2 and works properly, also with percentual widths. Hopefully it works also on IE.
Hamilton,
You can place the content inside the divs: leftcol and rightcol.
No question is stupid in this world.
Hi,
Nice work, but it is not working properly in ie7, any idea how to coup up with that issue?
Hi saif khan, I just checked it, it is working properly in Internet explorer 7. If you have any problem, please post your html and css code.
I have solved the issue by designing the template from scratch, many thanks for that solution.
I love simple solutions to common web design challenges.
Much appreciated!
I would love for this simple no-script and no-image solution to work but the code below doesn’t display properly in IE7. Is there a fix?
Thanks
Untitled Document
This is column 1
This is column 2
Thanks, this works well. Very appreciated.
Hi, thanks for the script, I’m going to try and impliment it on my own website redesign, I’m pulling my hair out over balanced columns, if i don’t find a solution today, i’m going to go with a simple table layout for the columns.
Just wanted to mention that (in my case) when I copied the code and pasted it into dreamweaver the layout did not work. Soon found the problem to be that I had to replace the quote marks to then everything worked. cheers
Great technique, thank you. Tested in IE6, IE7, FF2.
Just one note: this doesn’t work for elements with position: relative;.
This method suffers from a few problems. It’s best to use a nested container approach to equal height columnsbecause it works in all the common browsers and does not require any CSS hacks.
Hi,
This is cool, but I’m trying to figure out the logic to the extreme padding, and then negating it with the same negative number to the bottom margin. Would appreciate an explanation …
thank you!
Thanks for the code! What do you know, my headache is going away!
Hi, thanks for this script. I tested it at http://browsershots.org to see how my pages render in different browsers and it looks like IE8 makes the columns full length, 30000px?
Here’s my test code:
[code]
Column 1
Column 2
[/code]
[code]
@charset “iso-8859-1″;
body
{
background-color: #ffffff;
color: #000000;
text-align: justify;
font-family:tahoma, arial, helvetica, sans-serif;
font-size:11px;
text-align: center;
}
#wrapper
{
background-color: #ceda9a;
border: 1px solid #555555;
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 798px;
}
#banner
{
width: 798px;
margin-right: auto;
margin-left: auto;
padding: 0px;
background: url(images/banners/sample.gif) no-repeat center center;
height: 150px;
}
#container
{
width: 798px;
height: auto;
overflow: hidden;
}
#container .side
{
background-color: #ffccff;
float: left;
margin-bottom: -30003px;
padding-bottom: 30003px;
width: 160px;
}
#container .middle
{
float: left;
background-color: #555555;
margin-bottom: -30003px;
padding-bottom: 30003px;
width: 1px;
}
#container .body
{
background-color: #ccffcc;
float: right;
margin-bottom: -30003px;
padding-bottom: 30003px;
text-align: justify;
width: 637px;
}
#container .text
{
background-color: #ffccff;
margin-bottom: -30003px;
padding-bottom: 30003px;
padding-left: 20px;
padding-top: 20px;
text-align: justify;
width: 500px;
}
#container .clr
{
clear: both;
}
#footer
{
border-top: 1px solid #555555;
height: 40px;
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 798px;
}
[/code]
Other than IE8, it looks perfect.
jj
So, can anyone tell me why you’re not just declaring a height?
#container .leftcol {
height:500px;
}
#container .rightcol {
height:500px;
}
Am I missing something?
My (and IE’s) error, I had a div clear:both in the stylesheet. Oops!
THANK YOU!!!! This trick [hack] is fantastic works great. I’ve been trying to find a nice non-js work around for a while. Such a simple solution, love it!
your layout is really good!!!