heartlessg
 

Gadget Wishlist

Hello I was kinda bored at the moment so I thought I write a page here about gadgets Im just drooling to get my hands on.

Read more

CSS Layout 2 Columns Frustration

Written by Administrator, on 21-02-2009 02:01

Views : 1460    

Favoured : 198

Published in : , Web Design Blog

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.

Here are some useful links to get some good decent css layouts:
3 Columns Perfect layout by Matthew James Taylor

Last update : 21-02-2009 02:24

User comments Quote this article in website Favoured Print Send to friend Save this to del.icio.us Related articles
 
Well come people!

Written by Administrator, on 13-02-2009 03:38

Views : 1726    

Favoured : 193

Published in : , Personal Blog


Heartlessg.com is a personal website of mine thats been up and down up and down several times. Its all about design and other media stuff and of course , it also tell something about my self. Hope you enjoy your stay cause I got more stuff to show ya! ~ Dani

Last update : 13-02-2009 03:41

User comments Quote this article in website Favoured Print Send to friend Save this to del.icio.us Related articles
 
We have 20 guests online
How did you find this website?
 
For Sale domains
artlodging.com
chickababe.com
docileheart.com
remedylove.com

Contact me for any enquiry at the contact page.