ansaurus

Question

Answer 1

+5 A:

Change your markup to

<body>
<div id="wrap">
    Gubbins in here.
</div>
</body>

EDIT: Looking at the link, you've already done that. You'll want to either add overflow:auto; to #wrap or add a clearing div at the end just before the closing tag on the wrap div.

Also, on your example page, the wrap div is missing its closing tag.

John Sheehan 2008-12-31 18:39:12

Sorry my mistake my markup is already how you have stated.

Ronnie 2008-12-31 18:40:17

Actually looking again, on your example you're closing your div on the line that says </div>  your navigation UL is already closed, so this div is closing the wrap. move that closing tag to the end

John Sheehan 2008-12-31 18:43:56

Answer 2

A:

Use this CSS:

body { text-align:center;}
#wrap {text-align:left; margin: 0 auto; width:960px;}

Then, let's examine this statement from your question:

everything following the wrap div is be created outside of it

That's kind of the way it works. Don't put anything outside of your wrap div. Think of it as a surrogate body.

Joel Coehoorn 2008-12-31 18:45:24

I thought text-align:center; does not work for anything other than text in FF?

jmein 2008-12-31 18:46:11

margin: 0 auto; will work great for him once his markup errors are fixed

John Sheehan 2008-12-31 18:47:22

It's for IE, not firefox, to fix an IE css rendering glitch when trying to center content.

Joel Coehoorn 2008-12-31 18:47:44

but he said that his code works in IE but not in FF

jmein 2008-12-31 18:49:45

I have corrected the markup errors that have been pointed out. Yet i still had the problem. However after adding overflow: auto to wrap, everything is fine. Thank you.

Ronnie 2008-12-31 18:50:00

Ah, but which version of IE?

Joel Coehoorn 2008-12-31 18:50:01

IE6+ handles margin: 0 auto; without issue.

John Sheehan 2008-12-31 18:50:05

that is good to know. never done it like that before

jmein 2008-12-31 18:51:01

It now works in Firefox 3 and IE 7.

Ronnie 2008-12-31 18:51:20

Answer 3

A:

If you know the width of your page - and it's fixed, you can use the following methodology.

Contain your page content with a div (which will act as a wrapper)
Give this 'wrapper' div a width of 'W'
Position the wrapper div using 'left: 50%;'

now, utilising the fact that it's possible to have a negative margin...

Pull back the positioning of the wrapper div using 'margin-left: -(W/2);'

codeinthehole 2008-12-31 19:20:05

ansaurus

tags:

views:

answers:

Centering entire page with CSS

related questions