Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old September 20th, 2005, 06:13 PM
tul tul is offline
Registered User
 
Join Date: Sep 2005
Location: , , .
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default Not centering

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!

  #2 (permalink)  
Old September 20th, 2005, 11:26 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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
  #3 (permalink)  
Old September 22nd, 2005, 07:46 AM
tul tul is offline
Registered User
 
Join Date: Sep 2005
Location: , , .
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Yeah the wrapper.

  #4 (permalink)  
Old September 22nd, 2005, 12:16 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: , , .
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts
Default

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


Similar Threads
Thread Thread Starter Forum Replies Last Post
Centering content Europom CSS Cascading Style Sheets 2 February 18th, 2008 06:25 AM
Centering elements in Firefox and IE akeyworth CSS Cascading Style Sheets 2 December 19th, 2007 12:02 AM
Centering a box Terry Joseph Migliorino CSS Cascading Style Sheets 3 December 28th, 2005 09:22 AM
Centering of Image Within Nav Bar DuncanM CSS Cascading Style Sheets 1 April 26th, 2005 10:29 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.