Website layout

Hello,

In looking around on the internet, I notice that some websites are centered while others are formatted to the left.

I would like to center my website and would like advice on the following:

Can you give me your opinion on the pros and cons of centering a website

Would you recommend centering a website for a beginner such as myself (are there a lot of problems associated with it)

And, what is the best way to center a webpage.

Thanks so much in advance for all of your help.

Charlene

Pros
Easy on the eyes (IMO)
Can be professional if used correctly

Cons
Can be unprofessional if used incorrectly
Can have problems resizing if the layout is fluid
Can have centering problems in IE (duh!)

Best way
The best way to center a site is using CSS in my opinion.

Here's how...

...the css...

...the HTML...

I think that is clear...

...hope that helped you out

Bogey, not quite ... you forgot the following:

Otherwise it does not work in IE6 ...

then the text is centered

And why doesn't it work in IE? It works in IE for me

Oh... IE6 I don't have IE6

I know, but that's the only way I've seen so far that works with IE6 also, so you'll just have to set it to "left" again for everything else ...

I know it is seen as bad practice not to design for a particular browser ... but I don't design for IE6 anymore.

1) it's a really bad browser that fails in everything it does (or tries to do)
2) it has been suceeded by IE7 (which is a slight improvement)
3) people that don't update to IE7 at least don't deserve to be on my website.

I like to kindly tell them to use firefox

I can't quite do that for all the sites I design ... but I sure-as-hell see your point ... IE6 just irritates me, and yes I agree that IE7 work better, imo it's way better than IE6 ...

When I write a centered site, I use the short hand for my primary containers...


...and I just let it align left in IE6.

Because we in the western world read left to right, top to bottom, we don't tend to notice a well organized left aligned site, while we're reading. We only tend to notice it when we stand back and look at the whole.

What drives me nuts, however, is when a paragraph stretches across the entire 1680px width of my screen and becomes a single line. For Ozzu, even, I can't have my browser expanded to full screen.

Thank you so much for your replies. I really appreciate them. Please if anyone has any other comments regarding this, please feel free to post. I need all the help I can get.

Charlene

Simple solution


The text-align center is for IE5, not 6. Whenever I use just margin: 0 auto; it works fine in IE6. Also, keep in mind: you must specify a width and it must be a block level element in order to use margin: 0 auto;

Good luck!

are you talking fixed width page like adobe?

on 24" widescreen theres a lot of side space.

See what adobe has done with their menu on top? Made it stretch while rest of the content stays fixed.

Doing things like that so you don't just have a fixed area may help in appeal.

Um...sorry, no it doesn't, friend.

IE 5, 5.5 and 6 are essentially the same rendering engine underneath. The same rendering engine that was developed a long time before any web developers talked about standards and long before anyone heard the name Firefox. IE 7 marks a huge change in the way IE renders content.


I hope we were all assuming that.


The menu at adobe.com, itself, isn't stretching. There's a background image that's tiling in the X direction.

Then I have a question for you. http://www.wordhugger.com/ is one of the sites I recently finished. It is centered in IE6, but not IE5.5 (let alone 5). Nowhere in the CSS do I have body { text-align: center; } -- so why is it centered in IE6?

No, I'm tired and I'm not in the mood to sort through your workarounds.



I do have a better idea, though. Why don't you tell me why this doesn't work in IE6. Hmmm?



I think I could write your site in about 1/4 the amount CSS that you burdened my browser and bandwidth with.

//...and by the way, if I wrote your page it would work in IE5

Looks to me like it is the XML at the top. Try viewing this in IE6: http://www.stuckinanutshell.com/center.html -- works just fine.


Sorry, was a rushed job and did not have the time to go through and optimize it.

Hope this clears things up