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/temp/3colfixedtest_explained.htm and incoporating it with my current css.

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.