Centering Your Website Using CSS
It may seem like a small problem, but getting your website to be centered in a website using only CSS can sometimes be the cause of many head-against-desk situations, especially when once you’ve got it to be centered in IE, it is still to the left in FF!
Here is a simple bit of CSS that will center your website in most common browsers (IE6 & IE7, FireFox etc.).
Firstly, add these two classes to your style sheet.
.outer {
width:800px;
margin:auto;
display:table;
}
.inner {
width:auto;
margin:0px;
display: table;
}
The width in the “outer” class is the width of the site. You can edit this to how wide you want your site to be, but anything else leave untouched (unless you want to experiment of course!)
Now all we do is add two DIVS to the page, one with the class of “outer”, and one with the class of “inner”. Here is what it’ll look like:
<div class="outer">
<div class="inner">
CONTENT/LAYOUT ETC. TO GO HERE
</div>
</div>
That’s it! You will now have a centered website without using those horrid “center” tags!
Other posts in How To...
- Generating Customers via Your Website
- Create a Simple PHP Contact Form
- Centering Your Website Using CSS
- How you should be Link Building
If you enjoyed this post, make sure you subscribe to my RSS feed!
Welcome and thank you for visiting Emz Design!
Advertise on Emz Design for Free - Now!
I don’t see the need for that .innder div. Usually I have a #wrapper (It should be an ID - In general IDs are used for structure and you won’t have another .outer div ;))
Usually mine is:
more divs…
I spose everyone does it different
Ok sorry, I forgot to edit the HTML to include < and >! Oh well, it’s not that important.
Thanks for your comment Jack
It was a good few years ago when I discovered that technique and I guess I’ve just stuck with it. It works, so why not?
But if there is a simpler way I’d like to know about it
I can’t see what you did with that DIV there, but if you want to contact me with it I’ll edit this post to add it in?
Thanks
It was something like this:
<div id=”wrapper”>
all your content…
</div>
With the CSS:
#wrapper {
width: 800px; /*or whatever*/
margin: 0 auto; /*The important bit*/
}
Thanks Jack! I will give that a go with my next website
Yeah, I usually do the wrapper thing.
I personally hate auto size sites that fill up the whole window. Huge fan of centered layouts.
Couldn’t get any of your’s or other solutions I found on web to work, but then I am a real greenhorn at creating web pages, I’ve just carried out maintenance and updates for clients for years. Now I’ve just started to create my own from scratch. Please note I’m still working on the content.
I appreciate having a style sheet would make things a bit easier, but Dreamweaver updates all my pages in seconds, when I save the template. And to FTP them takes about another ten seconds
I got it to work by removing the and replacing it with works OK in IE7 and FF2, I’ll check IE6 tomorrow.
CONTENT
Well I did copy and paste the bits of code from the source in my Dreamweaver template but they appear to have disapeared when I submitted them.
I’ve now pasted them into Notepad first it usually gets rid of the junk, and then copied to here.
CONTENT
Still can’t see them, maybe it will once you allow the post. Any way the code is on this website.
Harry, thanks for your comments, but unfortunately it seems to have ripped out the HTML you pasted.
You can put the HTML in < code > tags and it will show up (hopefully
).
Sorry these solutions didn’t work for you, but I am intrigued at how you did it