Centering the entire page with CSS
I am trying to center my entire page using only CSS and it turns out to be more complex than I expected before. Currently my code works in IE, but not Firefox, which is making the change. The page can be seen here . Below is some of the code:
#wrap {
width: 960px;
margin: 0 auto;
padding: 6px;
background: #FFFFFF;
}
My HTML structure:
<body>
<div id="wrap">
Gubbins in here.
</div>
</body>
It seems that in Firefox everything related to the div div is created outside of it. This problem is resolved if I add "float: left" to the div wrap, but then obviously all floats are on the left and not center.
Any help would be greatly appreciated.
source to share
Change your markup to
<body>
<div id="wrap">
Gubbins in here.
</div>
</body>
EDIT: After looking at the link, you've already done that. You will want to either add an overflow: auto; to # wrap or add a separator box at the end just before the closing tag in the wrapping div.
Also, in your example page, the div is missing its closing tag.
source to share
Use this CSS:
body { text-align:center;}
#wrap {text-align:left; margin: 0 auto; width:960px;}
Then, consider this statement from your question:
everything following the wrapper div is created outside of it
This way of working. Don't put anything outside of your div. Think of it as a surrogate body.
source to share
If you know your page width - and it's fixed, you can use the following methodology.
- Contains the content of your page using a div (which will act as a wrapper)
- Give this "wrap" div the width " W "
- Place the wrapper div using 'left: 50%;'
now, using the fact that it may have a negative margin ...
- Pull back the position of the wrapper div using "margin-left: - ( W / 2 ); '
source to share