Topic: Div tags centered on page

Hi. Is it possible to center a div tag (on a page with no tables) by use of CSS? The way all of Godbit's content appears to be centered. Thanks!

He is no fool who gives what he cannot keep to gain what he cannot lose

Re: Div tags centered on page

Here's one method...

http://www.andybudd.com/archives/2004/0 … /index.php

I feel a nostalgia for an age yet to come...

Re: Div tags centered on page

Huh? I use IE and I also use margin: 0px auto; all the time in my CSS. Do any of you have experience with it not working? I don't...

Another method is to use position: relative; left: 25%;

We're all looking forward to the future...but none of us more than the giant, evil robots.

Re: Div tags centered on page

Anthony -

generalhavok wrote:

Huh? I use IE and I also use margin: 0px auto; all the time in my CSS. Do any of you have experience with it not working? I don't...

In some cases IE needs the style on body to include text-align: center in order for child elements on the screen to be centered horizontally.

Honored to Serve for Him - Tom ('Mas) Pickering <)><

Re: Div tags centered on page

generalhavok  wrote:

Huh? I use IE and I also use margin: 0px auto; all the time in my CSS. Do any of you have experience with it not working? I don't...

This seems to work for me. Though, I think you have to give the div (or other block item) an exact width for it to work.

Re: Div tags centered on page

maspick wrote:

In some cases IE needs the style on body to include text-align: center in order for child elements on the screen to be centered horizontally.

Hmmm. Odd that I've never run into that. Good to know!

Maybe it's because most of my sites have exact widths...

We're all looking forward to the future...but none of us more than the giant, evil robots.

Re: Div tags centered on page

One caveat with IE and margin:auto...  the page MUST be in Standards mode for it to render properly.  In Quirks mode in IE, the auto property is ignored...

Re: Div tags centered on page

one way to do it is this( and it seems to the most common but stop if i am wrong.)

body{
color:#whatever;
text-align:center;--->>>>Notice that you are telling the site to globally be centered and then within your other div id's you would tell it to text-align:right or       
left or justify; whichever you wanted.
background-color:#whatever;
}

#divId{
position:whatever;
float:whatever;
text-align:left, right or justify---->>>>Pick one;}

There are some other methods to centering though.
http://humandefinition.com/venture/
This is one example of centering that I am working on.
let me know if this helps.

Last edited by hsojeel (2006-04-17 21:52:29)

[witty scriptorial reference here]

Re: Div tags centered on page

I find it simplest to use an appropriate doctype and just use margin: 0px auto; on a containing element. That way, I don't have to reset a global instruction on every child element.

The only globals I use:

body *
{
margin: 0;
padding: 0;
border: 0; /* removes borders from images */
border: 0px solid red;
}

The last line is only there during development...it can be helpful to see a border around everything for layout purposes. I remove it when the page is done.

We're all looking forward to the future...but none of us more than the giant, evil robots.

Re: Div tags centered on page

And by appropriate doctype you mean which one? Sorry I'm a bit slow here.

He is no fool who gives what he cannot keep to gain what he cannot lose

Re: Div tags centered on page

Browsers have two modes...when you go to any webpage, it checks to see which mode it should be in. This is controlled by the web page itself. If the web page simply says I'm an <html> document, it goes into quirks mode. This means that it's not exactly sure what flavor of HTML you're using, so it relaxes it standards and uses general display rules.

If the page tells it exactly what sort of language in which it's written, the browser can then use the RIGHT display options for the page. This is known as STANDARDS MODE. We say "doctype", but a more full description is "document type declaration". Here's the doctype for XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

This is the first thing in your web pages...it tells the browser "heads up: here comes an xhtml 1.0 transitional document...now make sure you handle it right". Without declaring a specific document type, browsers render web pages less efficiently, and may render web pages inaccurately. For more information on doctypes, I recommend A List Apart.

Feel free to ask questions here...we're all generally pretty helpful!

We're all looking forward to the future...but none of us more than the giant, evil robots.

Re: Div tags centered on page

Anthony! Sorry again (for being unclear)! I just thought that depending on a given doctype the margin: 0px auto; that you mentioned would change into something else on the body {} or something. But then I read "on a containing element" and it became clear to me that I need to read the previous post once again before I post anything smile Thanks for the explanation, though. It was helpful!

He is no fool who gives what he cannot keep to gain what he cannot lose

Re: Div tags centered on page

You're certainly welcome!

We're all looking forward to the future...but none of us more than the giant, evil robots.