CSS Equal Height Columns

Once upon a time people used tables for designing website layout. Definitely table tag has many advantages but it’s not that flexible & extensile. You can not use proper positioning or floating attributes css style for table based layout. It’s not that commodious to handle table width/height from Dreamweaver, the layout gets messy when you drag any border of table, td or tr as the dimensions automatically get changed. The most important incentive for the current web sphere is SEO (Search Engine Optimization) which is dramatically & automatically mended when DIV based layout is used where TABLE based layout is toilsome for search bots to crawl & takes much page loading time. And at some point it makes more sense to use table for displaying tabular formatted data only, for example gmail uses table for the email list, this could be done using UL/LI, but table is more appropriate in this case.

Lately most web designers use DIV for page layout designing for its flexibility and robustness. Unlike table div has a big problem (in fact it’s the nature of div) when you want to give same height to multi-columns div based page layout, you can not do that very easily. I always used javascript for this purpose, but wished if I could do it with css, cos when the javascript is disabled the page layout will be not as expected in most of the cases.

Yes it is possible to create equal height columns with css! You can make the height of multiple floated divs equal using CSS only and no javascript or invalid css. Before beginning I assume you have adequate knowledge on HTML, CSS, javascript and you have already Firebug add-on installed on your Firefox :)

Lemme start from the beginning:

Default three column layout

Link to the HTML page

When you apply float left and fixed width to multiple adjacent divs, by default the layout looks like the above screen shot. You can see it from browser or have a look at the source code (html/css) on the following link above. You see as the contents are not same in the 3 divs, the height is different.
The next example is making the height of the 3 divs same using javascript (jQuery).

Three column layout – equal height using jQuery

Link to the HTML page

This is mostly and widely used for making equal height columns using javascript. I’ve used jQuery here. You may have a look at the source code from the link above.

$(function(){
	var H = 0;
	$("div").each(function(i){
		var h = $("div").eq(i).height();
		if(h > H) H = h;
	});
	$("div").height(H);
});

Now here comes the css equal height technique! The mantra is to use a large amount of bottom padding and the same amount of negative bottom margin to the floated divs and keep them inside an overflow hidden div. That’s all, and the magic happens!

Three column layout – equal height using pure CSS

Link to the HTML page

Let me get into details on how to do it. At First have a look at this link. Here I’ve used a huge amount (9000px) of bottom padding and the same amount of negative bottom margin (-9000px). But this makes the columns look so long and still not equal height at bottom. Now on this link I’ve used a holder div with overflow:hidden and that’s it, it is doing the magic by hiding the overflow section.

body{margin-bottom:50px}
div.holder { overflow:hidden }
div.holder div { float:left; width:30%; background-color:#9C0; margin-right:5px; padding:10px; padding-bottom:9000px; margin-bottom:-9000px }

Hope it’s clear now.

There is another method which use a background image with 1px height and color matched with the div’s bg color and body’s bg color. Please have a look at the html link, it’s self-explanatory.

Three column layout – equal height using pure CSS with Background Image

Link to the HTML page

Now I’ll try border to the columns and we’ll see the problem and it’s solution.

Three column layout – equal height with border

Link to the HTML page

Here you can see bottom border is missing which is obvious as we’ve used a huge bottom padding, from Firebug if you turn off overflow:hidden to the holder div and scroll down at the bottom of the page you’ll see the bottom border there but not equal height.
So how to solve this issue? There are 2 ways to do it – using a bg image in a tricky way or another pure tricky css hack.

Three column layout – equal height with bottom border fix using bg image

Link to the HTML page

Here I’ve used a 1px bg image for the background image and placed it at left-bottom of the bottom-border div with no-repeat and also applied 1px bottom padding. The holder div is inside the bottom-border div. Please feel free to play around with firebug!

This is the last method for bottom border fix without any bg image, just pure css.

Three column layout – equal height with bottom border fix using pure css and no bg image

Link to the HTML page

I’m not gonna explain the details of this last method, find it out yourself! :)

New Phonetic keyboard in Gmail

Gmail is continuously surprising us with its out of the box features, enormous flexible options and outstanding super-simple user interface. Everyday so many users being fade up with yahoo are going towards gmail. Like Yahoo, Gmail also show ads but they are never that annoying as they’re just simple text ads, no funky flash or image ads, no forcing for being a paid subscriber (Gmail don’t have any paid subscription, it’s totally free! :P). All these simplicities are the main attraction of Gmail which are driving Yahoo users towards it. The recent update in Gmail themes is “Random Themes” option. It’s really boring when you have to read and reply hundreds of emails a day. The “random” gmail theme automatically rotates the eye-catching collection of themes after every 1-2h which makes “gmailing” fun! “Random theme” is my personal favorite.
The free Xoopit plugin added an extra gear to Gmail which is no more as Yahoo bought the service. Here we can feel the acute cold war between Gmail & Yahoo evidently. Yesterday I tried Google Wave and it certainly will re-shape the concept of classical email system.

This morning I was typing an email on gmail and found a new symbol on top left of the compose box editing panel (Rich formatting mode). I clicked it and saw a drop-down menu with 12 languages options including Bengali, Hindi, Arabic and so on. OMG! it’s phonetic keyboard! I tried some text with it, simply awesome!! I hope gmail will keep going on with its passion for the “ease of use”. Bravo! love you Gmail.

jQuery Drop down menu without setTimeout

I worked a lot with drop-down menus like most of you. There are many stable versions of DD menus using pure javascript & CSS or only CSS with cross-browser support and you’ll get them free from many menu maker websites or desktop applications. So I’m not going to reinvent the wheel.

I’m a freaking fan of jQuery and always use it for drop-down menus with my custom jQuery code. It’s a must to use a delay for javascript driven dd menus even for jQuery when you want to give it some effect like slideDown or slideUp (For CSS dropdown menus it’s not possible & thus no need to use delay). I always wished to use jQuery without any setTimeout function for the drop-down menus. And I did it which I’m gonna share with you.

$(function () {
    $("ul>li").hover(function () {
        $(this).find("ul.sub").slideDown('fast');
        $(this).addClass("hover");
        $(this).hover(
        function () {},
        function () {
            $(this).find("ul.sub").slideUp('fast');
        });
    },
    function () {
        $(this).removeClass("hover");
    })
})

Here it is in action

The main tricky part is using hover inside hover function:

$(this).hover(
function () {},
function () {
    $(this).find("ul.sub").slideUp('fast');
});

This removes the mouseover function (first function of hover) when mouse hover into the li so the slideDown does not happen again when the mouse enter into the inner ul/li. Hope that makes sense. You may like to add a delay and do some more fine tunes.

Happy Coding!