Centering Entire Page With Css
I am attempting to center my entire page using only CSS and it is proving more complicated than i first expected. Currently my code works in IE but not in Firefox which makes a cha
Solution 1:
Change your markup to
<body><divid="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.
Solution 2:
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.
Solution 3:
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);'
Post a Comment for "Centering Entire Page With Css"