Clean CSS Layout

When someone is finally ready to give up the tables and look at CSS for layout, it can be pretty confusing. It is a completely different mentality.

If you stick with it, you will get it. Floats are often proclaimed by fanatics as being the 'right' way to do your layout. Floats are meant to push something like an image off to one side or the other and have your text wrap around it. So, technically, floats are being abused to force page layouts. But, after looking at all the options, floating is the best one you have.

Some of the future CSS capability will finally have a way to replicate the control of a table. But, I honestly would not touch that until all the browsers (including the infamous IE) actually supports this feature correctly. You could also do a fixed size for your layouts, but really.... that is just settling. The fluid layout approach is going to be the best. The website needs to have some flexibility to it to account for the different monitor resolutions (and even screen readers).

Other people can make that argument much better than me. So, I'm just giving what know with my own bias mixed in. You do see a lot of fixed size layouts. Even some fluid ones make an assumption of 960 in size. But, believe it or not, there are people still out there using 800x600. I've seen it.

When reading around, you might very easily come to think that positioning is what you want to use to position things.... HA HA HA... (That was one of those bellowing laughs!)

Remember how I was saying that CSS positioning is a completely different mentality? That stuff is a little messy. Absolute positioning pushes something to the top, left, bottom or right of the next positioned container with an offset. The relative positions pushes the box from where it would normally be to the offset your give it. Static is the default. Fixed glues something to a spot in the window. (Also, if you don't specify something like a height, and think that content will give it height, it will overlap and things just won't work correctly.) You might want to avoid this stuff for awhile. This is not a thorough explanation, but it does show you that it is not quite the cleanest thing to use.

So, for now, floating is the way to go. It doesn't have to been too hard. Here is a great reference that shows how practical and simple using the floats can be. I recommend using this reference as it is the best I could find:
http://www.tjkdesign.com/articles/one_html_markup_many_css_layouts.asp

For more info:
http://websitetips.com/css/tutorials/layouts/