Not centering

tul · September 20th, 2005, 06:13 PM

For some reason my wrapper div isn't centering in firefox or IE. If it works on one, it doesn't on the other.Heres my css

Quote:

quote:body{

Quote:

    background-color: black;
    font: verdana;
    margin:0px;
    padding:0;
    }

div#wrapper{
    background-color: white;
    width: 709px;
    height: 100%;
    text-align: left;
    margin-right:50%;
    margin-left:0;
    }

div#banner{
    background-image: url(images/banner.jpg);
    background-color: #FFFFFF;
    width:709px;
    height:350px;
    padding-top:0px;
    }

div#below{
    background-color: #FFFFFF;
    padding-top: 0px;
    width:709px;
    height:100%;

    }
div#content{
    background-color: #FFFFFF;
    width: 442px;
    padding-top:0px;
    font-family: verdana;
    font-size: 8pt;
    color: #8D968F;
    padding-left: 5px;
    }

div#divider{
    position: absolute;
    top: 350px;
    background-color: #FFFFFF;
    background-image: url(images/nav.jpg);
    margin-left: 447px;
    margin-top: 0px;
    padding-top: 0px;
    height: 100%;
    width: 6px;
    }

div#plans{
    position: absolute;
    top: 350px;
    background-color: #FFFFFF;
    margin-left: 453px;
    margin-top: 0px;
    padding-top: 0px;
    height: 100%;
    width: 246px;
    font-family: verdana;
    font-size: 8pt;
    text-align: right;
    }

div#news{
    position: absolute;
    top: 137px;
    background-color: #FFFFFF;
    margin-left: 433px;
    margin-top: 0px;
    padding-top: 0px;
    height: 196px;
    width: 246px;
    font-family: verdana;
    font-size: 8pt;
    }

and here's my html

Quote:

quote:<html>

Quote:

<head>
<style type="text/css" media="all">
@import "style.css";
</style>
</head>

<body>
<div id="wrapper" align="center">
<div id="banner"> </div>
<div id="below"><div id="divider"> </div>
<div id="content"><div id="welcome"><b>Welcome</b>
<br>
asdf
</div>
<div id="plans">Plans...<br>
Plan01<br>
$100<br>
blah blah blah<br>
<br>
Plan02<br>
$100<br>
blah blah blah</div>
<div id="news"><b>News will go here</b><br>All your news will go here. Don't type too much, so you desturb the divs.</div>
</div>
</body>

</html>

Can someone help me so that it centers in IE and FF?
thanks!

meow · September 20th, 2005, 11:26 PM

Hi! :)

Do you want to center #wrapper itself or its content? Can you describe how you want it to look?

You use a lot of absolute positioning. All those blocks are positioned realitive the browser window *no matter what*. I'm not sure that's what you want.

--
http://yupapa.com

tul · September 22nd, 2005, 07:46 AM

Yeah the wrapper.

meow · September 22nd, 2005, 12:16 PM

Oki. But there's more to this than immediately meets the eye. There are many things involved here. :)

First, use a doctype that puts all modern browsers in Standards Mode. That'll minimize the differences between them.
http://www.hut.fi/u/hsivonen/doctype.html

To center a box with CSS you can give it equal margins. Since the width of the box is known but the width of the viewport is not, we can use 'auto'.

(I just write the properties that matter.)

Code:

div#wrapper    { width: 709px;
                 margin-left: auto; margin-right: auto }

That will do the trick in modern browsers, but not in IE5.x (or 6 if it's in Quirks Mode). The usual hack to fix that is to use 'text-align: center' on a block that contains the one you want to center. 'text-align' should only center text and text-level elements but IE gets this wrong and lets it center blocks too. BODY will do as container. Then we get this.

Code:

body           { text-align: center }
div#wrapper    { width: 709px;
                 margin-left: auto; margin-right: auto;
                 text-align: left  }
/* Note that you have to undo the 'center' or all text will be centered. */

Now, because you have positioned the other boxes absolutely what we have done won't affect their placement one bit. Absolute boxes are out of the flow.
http://www.w3.org/TR/REC-CSS2/visure...opdef-position
As you can read there they are positioned relative their containing block. The containing block is in this case the root element, effectively the browser window.
http://www.w3.org/TR/REC-CSS2/visudet.html#x0

So, to make #wrapper the containing block we have to position it too. 'position: relative' (without parameters) does the trick and leaves #wrapper itself where it is.

Code:

body           { text-align: center }
div#wrapper    { position: relative;
                 width: 709px;
                 margin-left: auto; margin-right: auto;
                 text-align: left }

There. Note that the other boxes will now be positioned relative the edges of #wrapper not the browser window, so you'll probably want to change some of their offsets. I don't think you have to position them at all, but that's up to you. Using an offset in pixels bases on the text size is asking for trouble though. All browser except IE can easily resize the text. Since 8pt is small many people will do that. Height 100% doesn't work as you probably expect either. Sorry I can't explain it in a simper and more thorough way, but this is a BIG topic.

--
http://yupapa.com