Making Equal Columns Height in Css Div Tag
There’re some tricks to make equal height in Css div tag sush 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.
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
Thanks for these tips.
Its very valuable.
rickky