[RESOLVED] CSS Layout

Hi,

I have looked at many CSS websites showing various designs all stating why they are compatable with various browsers and ant downfalls, on looking at these I have decided I quite like the 3 column style with a header at the top. What I cant understand is the width of the container divs.

Some sites seem to maximise to use the whole of the screen and others stay centered leaving about 20% at each side blank. Is there any reason for this and whats the best practice? Should I only put content in 60% the width of the area or should I specify the pixels/pt for the width of display.

Advise please.

The main reason, is to try and accommodate as many screen resolutions as possible, take a look at yahoo, by centering your main table, and using a pixel size of about 700px (be careful of using percentages in your main table) you get a nice layout, whereas if you have your table on the left as many do, when it is viewed at high res it will look a bit daft tucked away in the corner.

Basically it is just your preference. Whether you think your layout will look nicer occupying the full screen, or with a side margin (I like the margin myself). A common thing to do is use a percentage value for the body width, and specify min-width and max-width to ensure it is always within certain boundaries.

Be aware though, that most of these prefabricated CSS layouts you will find are chock full of unneccessary browser hacks. I wrote a three column layout with header and footer in this thread (post 8) that has no hacks and works fine in all three major browsers (a sure sign that it will work in nearly all), I think that's proof that you'll always be better off writing it yourself.

Another thing I've noticed is that not many people style the body element individually of the html element, it is important to realise that you can do that as it saves you making unnecessary container elements in your markup just for style purposes.