Can't believe it. I spend almost 4 hours trying to find out why my display is not the way it should be. I was trying out the 3 flexible columns with a footer from http://www.pmob.co.uk and incoporating it with my current css.

I was testing out on two browsers. IE and Firefox. The display is fine in IE but I have some problem with Firefox. My center content would have height as high as the left column content. After debugging line by line I realised that I have br{ clear: left; } defined in my styesheet. Gosh.. this one line cause me so much time. Well one good news is at least it is solved and I can now move on with the rest of the work.

Check out the pics below

The faulty display:                                                                             After it's corrected:

Anyway if you are asking why is the problem not happening in IE, the reason is there is a line from 3 flexible columns with a footer  that voided the <br> problem and the line is

* html #centrecontent {height:1%;margin-bottom:0px}/* combat IE's 3 pixel jog */

 I was checking for pixel bug in Firefox before deciding to do a line by line testing. Anyway looks like I am the one with bug not FireFox :P