Sunday, October 14, 2007

Why use float based CSS web designs

There are a few ways of creating CSS based layout, I have used absolute positioning in the past, but I have run into a few clients that want the web site to move fluidly when they use the zoom feature that comes with most modern browsers. I had a bit of a struggle with the notion of the end user changing my web design, like why did I spend all that time determining the size of all my headings and other text. Anywho, I have switched to float based designs that can accommodate the end user changing the zoom and proportions of the site.

I started using 2 column designs where both divs were floated left and separated by padding within a fixed width wrapper, and this works in most browsers. However, some browsers don't behave themselves and would place the divs one above the other, and that was no good. So I switched to using percentages. Percentages can be a pain when it comes to figuring distances and when using images, but they will make the client happy when they want to alter the way the site is viewed. Just remember to clear the floats every once in a while, if it is a simple site, just clear the footer and you will be fire.

Liquid web designs just make more sense to me now, considering many people have 19" and 21" monitors. I didn't like loosing all that real estate designing sites that were 995px wide. Now with a web design that is 85%, I don't loose any design space, and by creatively using images with softer, gradient edges, the site can expand and I don't loose any effective imagery.

Creating 2 and 3 column web design with percentage and float based CSS can give web sites the mass and structure you need to convey all your information and eliminate many scroll-bar situations.

No comments: