January 25th, 2008

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.


Related Posts

5 Responses to “Making Equal Columns Height in Css Div Tag”

Leave a Reply