FLOATING: both divs -NOT GOOD
I have been doing templates for about 3 years now coming from the table based layout to simply pure LAYER layout. At first all I knew was to set the css for 2 div's as FLOAT: LEFT and WIDTH and you're good to go. But later on found out that setting it this way actually has alot of potential mess up. Like the right column get pushed down below when the content contains COMBO BOXES, LINK tags and javascripts.

FLOATING: 1 Div only -NOT GOOD
After encountering this I went on searching ways of doing a simple 2 column (fixed) layout. Then I thought I found the right one, its when you only float 1 column to either left or right and just leave the other one normal and be set the width. And its all good, same thing happened on this one specially when content becomes really cumbersome with form tags and other element field types.So okay its time to put on my googling skills again. I found:

USING PERCENTAGE MARGIN - OKAY ~NOT PERFECT
At the moment this is the way I do 2 column layout. This type of layout can actually withstand any contents. How it works: 1 wrapper for the right column and a normal div column afterwards for the left, set them both to float left. and have the wrapper have a width of 100%. This will push the left div out of the way usually out of the view,after this have the LEFT div which is the one thats got pushed out of the way have a margin-left to -100%; this will bring back the left div as if like it had margin-left: 0 set the width for this div and this will become your left column. Then put a new div inside the wrapper and this will be your right column, apply a margin and a width to it and youre all done.

So basically the last way of doing it seem to suffice but this type of layout is not perfect for some reason when you refresh your page the left column goes too far to the left as if the starting point is exactly where it is and having it margin-left: -100% brings it back to far left. The right div is still intact but that sure is not the type off effect we want. But it only happens quite a few and sometimes it will just work by it self which is not really good.

So at the moment the third layout is the one Im currently using but I wont be using this for long I need a solid 2 column layout that can conquer all so the journey starts again.

Last update : 21-02-2009 02:24