Making Equal Columns Height in Css Div Tag
When you design your site using Css, a problem that you may found is can’t make all columns in the same height when testing in Internet explorer and Firefox you will see a different. In this page has a solution for you.
There’re some tricks to make equal height in Css div tag such as
Faux Column by A List Apart
http://www.alistapart.com/articles/fauxcolumns/
Equalizing Column Heights by Sitepoint
http://www.sitepoint.com/newsletter/viewissue.php?id=3&issue=70
Creating Liquid Faux Columns by Community MX
http://www.communitymx.com/content/article.cfm?cid=AFC58
How do I make equal columns in CSS? by Search-this
http://www.search-this.com/2007/02/26/how-to-make-equal-columns-in-css/
The technique I like the most is from Sitepoint that using javascript from cross-browser.com.
In Sitepoint’s tutorial page was claimed you have to download x.js from cross-browser.com
you can download my sample files included x.js file here.
My tutorial on this page is just a guide how to apply the script.
1. Define how many column do you want, in this tuorial I will make 3 columns.
- Column Container
- Column Sidebar
- Column Sidebar1
2. The Code
Put this code between ‹HEAD>‹/HEAD> (look at line number 7, 8, 9 and line 16, 17, 18) I’ve inserted my column name in the code.
On the first line, you have to include the path of x.js
<script type="text/javascript" src="x.js"></script>
<script type="text/javascript">
function adjustLayout()
{
// Get natural heights
var cHeight = xHeight("container");
var lHeight = xHeight("sidebar");
var rHeight = xHeight("sidebar1");
// Find the maximum height
var maxHeight =
Math.max(cHeight, Math.max(lHeight, rHeight));
// Assign maximum height to all columns
xHeight("container", maxHeight);
xHeight("sidebar", maxHeight);
xHeight("sidebar1", maxHeight);
// Show the footer
xShow("footer");
}
window.onload = function()
{
xAddEventListener(window, "resize",
adjustLayout, false);
adjustLayout();
}
</script>
</head>
3. Customize the code
- As you see the code above, you just need to change column name to your own column name at line number 7, 8, 9 and line 16, 17, 18
- You can add more column by add xHeight. (See the code below how I added my new column “sidebar2″ as the 4th column at line 4 and line 14)
var cHeight = xHeight("container");
var lHeight = xHeight("sidebar");
var rHeight = xHeight("sidebar1");
var zHeight = xHeight("sidebar2");
// Find the maximum height
var maxHeight =
Math.max(cHeight, Math.max(lHeight, rHeight));
// Assign maximum height to all columns
xHeight("container", maxHeight);
xHeight("sidebar", maxHeight);
xHeight("sidebar1", maxHeight);
xHeight("sidebar2", maxHeight);
4. How to use the script
- You just create a div tag as usual
<body> <div id="container">container</div> <div id="sidebar">sidebar</div> <div id="sidebar1">sidebar1</div> </body>
5. Download a Sample file
- You can download a sample file here and test it on your computer.
March 29th, 2008 at 7:50 am
Hello I’ve been looking for a site that has some good information on Mysql 5 Download. I was searching around on Google and your post regarding Equal Columns Height in Css Div Tag – WebStockBox caught my attention .. Good info thanks Saturday
April 10th, 2008 at 11:40 pm
Thanks for these tips.
Its very valuable.
rickky
June 2nd, 2008 at 2:49 pm
Thank you for the great info. The .js seems to do the job in IE, but when viewing my page in FireFox It seems to have problems. Most aparent on my http://www.olympiagun.com/gun-safety/gun-safety.html
Any help would be appreciated. Thanks again
October 29th, 2009 at 2:15 am
This is a great script. Do you know if it is possible to run it more than once on a page on different columns?
November 26th, 2009 at 10:41 pm
This is nice entry. Thanks for the quality information you shared! I was finding for this entry for a long time, but I wasn