#Content Centering

[Ben@WEBProp]

I know that there are two ways to center a div on http://www.bluerobot.com, but what about just doing a padding level for each side? I see that using the bluerobot techniques, the div is a definate size in pixels, which gives a varied look depending on your resolution and screen size. The only bad thing that I can see with the negative margin version is that when the window is resized to be smaller, the negative margin shifts the page left of where the browser window is located, thus leaving the user with an incomplete view of the page.

When I switched the layout to a body {padding: 20px} (just an example), and used a #container, everything looked pretty good!

Is there any known reasons why I shouldn't use this technique? I mean, I know I don't get a fixed # of pixels for a container to work with, but it looks good to me. Any known drawbacks?

Also, what is the difference between using a body {padding: 20px;} and #container {margin: 20px;}? Shouldn't the effects be the same?

Thanks!

-Ben

[Ben@WEBProp]

Kryek- I really like the centering of your ithium.net, how do you center a div and not use a negative margin like that? What are you using to center it?

Also, only $10 per personal site? I think i might sign up for that pretty soon!

-Ben

[edit]Oh wait, I see, you are using the ie text-align thing, eh? Well I know that it works in all versions of IE that support css (4+?), but does the div looked centered in other browsers? Or is it just in IE that ithuim.net looks centered? If not, then what does it look like?

-Ben

{/edit]

[krycek]

I really don't know if you meant to post here or not...? :confused: It was purely by chance that I read your post.

Plus, I'm confused... the CSS property text-align is exactly that - CSS. It's not IE-specific, and the site looks identical on IE, Mozilla, etc.

Anyway, it's the margin: 0px auto 0px auto; that forces it to centre.

::] krycek [::

[Ben@WEBProp]

When I specified the margin like you said, but left text-align: center out, my div was incorectly aligned. I will look it over again, but it didn't center for some reason.

I figured that there was a good chance that you *might* read this, so I figured if you didn't that I would just pm you.

But you are sure that the thing looks right in all browsers?

Also, will your servers have the FrontPage publishing extensions? Will I be able to upload .htaccess?

Thanks!

-Ben

[krycek]

yup the centring technique works fine in all the browsers I have tested.

I do provide FrontPage extensions, but I hate them, so I always try to talk people out of using them :D seriously, they're never really needed.

And yes, stuff like .htaccess can be used fine.

However, this aint forums talk... email me (krycek@ithium.net) or talk on MSN (same address)

::] krycek [::

[pardicity3]

Originally posted by Ben@WEBProp
When I specified the margin like you said, but left text-align: center out, my div was incorectly aligned. I will look it over again, but it didn't center for some reason. Do you have a valid doctype on your page and are you testing your page in IE? If you don't have a valid doctype then ie will stick in "quirks mode" and thus the margin: 0 auto; declaration won't work properly. Try throwing in a valid and appropriate doctype and see what happens.

[Ben@WEBProp]

I can't get a doctype, if I do then my Horizontal Nav Bar get's its rollover effects all messed up. If I do put IE into quirks mode, then wouldn't the text-align: center; fix that problem? Will it still display normally in all browsers if I have both the margin: and text-align:?

-Ben

[ronaldb66]

if I do then my Horizontal Nav Bar get's its rollover effects all messed up. that would mean your nav bar is far from standards compliant.
IE5.* misinterprets the text-align property, meant for inline content only, and applies it to block content as well. If the content in such a block needs to be aligned differently you'll have overrule the earlier center value.
But I'd rather suggest including the correct doctype and run your page through a validator to see if you can fix the nav bar.

[krycek]

The centered stuff works in IE in quirks mode too. In fact, I include an xml prolog to throw IE into quirks mode so I can use the box model I want :)

::] krycek [::