Horizontally Center Your Website Structure Using CSS
Every web programmer knows that you can't code a commercial website for a specific browsers or user experience level, much less a screen resolution. Since you can't count on a user having the latest and greatest, you need to use the lowest common denominator of browsers resolution. In today's web world, 1024x768 is usually the lowest browser resolution coded for.
I prefer to create my websites using a fixed width so that I can have complete control over the website layout. A fixed width website looks the same in all browsers which can prevent users with extremely large or small resolutions from experiencing layout issues. Instead of simply allowing the website to align completely left on the screen (resulting in high-resolution users seeing your website take up only half their screen), I center the site. This is a very simple task.
Step One: HTML
Declare a DOCTYPE. Create an initial "wrap" DIV that will be the website's wrapper.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>My Site</title> </head> <body> <div id="wrap"> <!-- WEBSITE GOES HERE --> </div> </body> </html>
Step Two: CSS
Declare the wrap ID -- you MUST declare a width (otherwise, how would you center it?) Use left and right margins of "auto."
/* "auto" makes the left and right margins center the wrapper */
#wrap {
width: 900px;
margin: 0 auto;
}
That's It?
Yes! Centering your website is that easy. This website currently uses this layout. Does my website take up most of your screen? That means you have a low browser resolution.
Comments
Be Heard!
Share your thoughts without being a jerk! And wrap your code in <code> tags, f00!
Great site. I thought I was a great web designer but I’ve relaized there’s a lot more to learn. Thanx.
But here’s a tip from me (I guess you already know it but some of your readers might not):
html
{
height: 100%;
margin-bottom: 0.01em;
}
Add this to your style to always have a scroll on the page. Otherwise the centered div will jump when switching from a page with a scroll to a page without. The width of the page is dependant of whether there is a scroll on a page or not.
Hi!
I never really got my head out of the fixed layout world handed to us by the printing industry. I’m not able to realise a design for this new internet web based medium – so instead I’ll carry on pretending I’m using paper and ink. Hard luck if you’ve got a 1900×1280 wide screen, or an older 800×600 set-up eh?
To be fair, I shouldn’t really claim to be a web designer because I’m not really designing for the web.
That’s pretty old news…
http://www.simplebits.com/notebook/2004/09/08/centering.html
@Martin: Thank you for sharing. I always do notice the scrollbar “jump” in FireFox but it’s never been a standard in our web shop to do anything with it. I do agree that it could make the site smoother.
@Tim: I don’t try to set the world on fire with every post. When I view my web stats (Google Analytics), I see keywords for what people are looking for to get to my site. I saw a fair amount of keywords that related to centering a website, so I decided to create this post. If you look at the “About Me” section, part of the goal of this website is to save people time with quick tidbits — that’s exactly what this is.
Not working!
I tried to put in the code and it was going well till stage 2, but you give no indication where to place the code.. (I guess you assumed it’s obvious)
I’ll keep looking
It is really nice to reminded of these small bits of useful code. Keep it up!
Hi David,
Woah. This post is from the future =).
Very nice simple trick for centering, I’d say 90% of every site I’ve ever designed uses this. It is good that you pointed out that DOCTYPE, this trick doesn’t work unless you have that properly declared.
Nice tip David. Thanks for sharing this with us. Savvy designers probably know it already, but less experienced developers like myself certainly appreciate tips like this. Please keep up the good work. Thanks also to Martin for his tip to prevent page jumping!
FYI, this won’t work for IE6 and below in quirks mode. You need to add a text-align: center to the body and a text-align: left to your container.
I agree with what has already been said, as we develop as web designers we can soon forget the simple little tricks we used to use because we found some new more complicated designery way of doing the same thing. It’s can be good to get back to basics…..
As a programmer, I use this daily and don’t really think much of it. Quite frankly, I’m surprised the article has been so highly viewed. CSS is clearly the bridge between programmers and designers.
Here is another quick fix for the scroll bar issue…
html { overflow-y:scroll; }
Hi David,
Thank you for this tip. I have used it loads of time before, but this time when I came to use it, I just had that one thing missing… the width of the wrapper class.
R
This was a very useful article. Thank you.
Thanks for the additional comments too.
Thanks a lot man, I’ve been trying to figure this out for quite some time but other articles never really got to the point. I am happy that you were able to help me out efficiently and quickly.
Regardless of what anyone may say, keep it up for sure. And I’ll be sure to keep this site and you in reference if I have any questions pertaining to css, html layouts.
I can not get this to work. It looks so simple, but it still doesn’t work for me? Can someone e-mail me a fix? I don’t know how long it will be till I come back here :(
P.S. email is tsteuwer @ gmail dot com
Do you have a link to your page Troy? If so, we can take a look and make suggestions.
Regarding centering a site structure using css and wrap:
I have some external css links as well. They seem to negate the centering that you describe above. How do I use external links, either in conjunction or exclusively, with this wrap procedure?
Thanks again,
Jeff
Below is the code for a page I created using CSS and multiple and classes (sorry, I’m in the process changing them to ids). I was able to center the structure but all the divs don’t seem to fit correctly. How do I position within the wrap ID?
@Jeff: Could you provide an example URL? It would make answering your question a lot easier.
I’m really new to css and was wondering if you could help me out.
Is there a way to do this with the background as well so that the background follows the page?
I’ve centered my background with ‘background-position: center’, but lets say my page is 1000px in width. If I shrink the page to below 1000px
the background will shrink from the outside in but my page shrinks from the bottom right, so then my background ends up not matching the page.
Thanks,
dan
@Dan: Can you provide a sample page? I’m not quite understanding your question. Thanks!
I’m trying to post to your blog but I can’t find the link to do so.
Below is a sample of a page I’m trying to create using pure CSS. I want to nest a CSS rollover inside another div. I can create the div sections but the CSS rollover will not appear. Is there a way to do this or do I just use Javascript.
HTML:
Jeff Steiman Production Design Online Print Portfolio Site
right
CSS:
@charset “UTF-8″;
/* CSS Document */
#container{
width:707px;
margin-left:auto;
margin-right:auto;
height: 786px;
background-image: url(images/bg_Atty.jpg);
}
#header{
}
#header2{
height: 109px;
}
#left{
float:left;
width:300px;
height:200px;
padding-top: 19px;
padding-left: 17px;
}
#right{
margin-left:320px;
}
#footer{
clear:both;
}
#nav {
width:220px;
height:200px;
}
.btnHome a {
display:block;
margin-left: 17px;
background-image:url(/images/btnHome.jpg)0 0;
background-repeat: no-repeat;
}
.btnHome a:hover {
display:block;
background-position: 0px -24px;
}
@Jeff: Can you send me a sample page URL? Thanks.
Hi David i really thank u for the kind of information u have given, i t is so useful to me. THANK YOU once again. I just want to keep in touch with you, can u please reply to my mail id.
Hi David. I came across this and it worked out great; for Firefox. The page is still naturally aligned left for some reason in Internet Explorer. If you could reply to this as soon as possible, it would be much appreciated.
EDIT: Nevermind; problem solved. (:
Great job! keep up the good work!
One question…”I tried out the wrap method but the words I typed which were HOME, TANKTOPS, T-SHIRT, etc… are centered throughout, but what I am trying to do is insert these words into an “image” following the movement of the “image” background… This is what I have for this part, please… I need help:
HOME
TUBETOP
TANKTOP
T-SHIRT L
EGGING
BLOUSE
I am trying to insert the into the
HOME
TUBETOP
TANKTOP
T-SHIRT L
EGGING
BLOUSE
@James: To be completely honest, I have no idea what you’re asking me. Please provide a URL.
Hey again Dave! I finally got a web hosting server and so glad I can get some worldwide feedback. I along with the rest of us appreciate what you are doing here and hope good things will happen to you.
The url I just made is http://www.bargain4clothing.com
*From looking at page source, i used a different method of centering. I think your method is more professional, thats why I think I should delete mine and use yours.
*My method can only center images, not layers. I would like to know how to center them without using absolute positioning.
Hopefully you can help and hopefully it will turn out greato!
Thanks again so much and have a great day!
Awesome! I have been looking for this code for quite some time. Thanks a bunch!
This code isn’t working in Internet Explorer. It shoves the whole page to the right instead of centering it.
It does how ever work fine in Firefox and Safari.
What I can I do to fix it?
Well never mind!!
HERES A TIP IF YOU ARE HAVING PROBLEMS WITH IE
if the doctype is not set to XHTML, IE6 and 7 both seem to have issues centering it. If that is the case simply add a “text-align:center;” to the BODY and a “text-align:left;” to the wrapper (to counter act the inherited text-alignment of the BODY).
Maybe this was said in some other way previously, but I have no problems with redundancy. Great stuff! thanks!
Hey david
this site is awesomee!!!
n this was exactly wat i needed
i dint try it yet , i thought u could take a look at the site n help me
the page has abbsolute positioned objects
it is fine in browsers of a normal desktop pc
but in widescreen laptops it is to the left
so i think this code is the right thing as i just learnt css
hope u take a look at the site and if its not too much trouble i hav some problem wit my menu in which i used thee hover option i know its not supported i IE6 but in IE7 the drp downs go berserk so i hope u can help me wit tht.
thanks a lott if its posibble mail me at hameed.ansari@hotmail.com
Thanks! In two minutes this CSS solved what was taking me hours to figure out.
Learn how to size your text and your website layout in em instead. :) It’s poor practice to force an user to use the text sizes you specify because some users may well need to have larger text if their eyesight is failing or they have some other eye problem. It’s off-putting to them.
Hi
I have managed to center in ie7 but firefox and google chrome elude me i have also centered in ie6 but there i have other issues i hate ie6 i have posted the relevant code below if you could tell me what to do i would be very happy thanks already for getting me this close its been driving me nuts.
The site i am working on is http://www.portugalmidlands.com
relevant styles are
body {
background-color: #000000;
text-align: center;
}
.wrap {
width:980px;
margin-left: 0 auto;
margin-right: 0 auto;
text-align:left;
}
.leftcolumn {
background-color:#ffffff;
border: 1px solid #cc0000;
padding: 10px;
width: 230px;
float: left;
font-family: georgia;
font-size: 12px;
color: #000000;
text-decoration: none;
text-align: justify;
position: relative ;
}
.centrecolumn {
background-color:#ffffff;
width:670px;
font-family: georgia;
font-size: 12px;
color: #000000;
text-decoration: none;
text-align: justify;
padding: 20px;
position: relative;
margin-left: 260px;
}
@Paul: This is what it should be:
.wrap { width:980px; margin: 0 auto; text-align:left; }
Hi Walsh, I have an inquiry. What about if you used a photo imaging software to design your site and it is basically a bunch of “absolute positioned” images that somehow are always positioned all the way to the right when interpreted by a browser. I have a tired a lot of different ideas, but none so far work. I don’t really want to start again from scratch. I am not a coder either so a lot of this css or html is greek to me.
Maybe you could look at my site and give me some advice on what can be done about centering the page. http://www.bengonsioroski.com
Thanks for your time,
Ben
david you rock my world : )
love your work!
THANK YOU!!! I’m used to using Dreamweaver CS3, but only had access to Dreamweaver 8 to do my portfolio site. I was so frustrated about not being able to figure out where “site properties” was & why my page would not center. I finally searched “centering using CSS” & came across this blog on my first search. I’m so glad. It was SO easy to fix my site! I’m uploading it right now! Thanks! :-D
Thank you David!! it helped me =P
David,
Thanks a ton!! I tried your CSS centering technique and it worked like a charm. Two questions:
I hear that to make it work with older versions of IE it is necessary to add some workaround code involving some text alignment stuff. Being something of a newbie, would you be willing to give us that code and exactly where it gets plugged into your centering example?
To make my website stand out I would like to set a background color, probably black, for the wrapper. How can I do that?
With much thanks for you help to all of us!
Clay
David, sorry about the URL typo. Likely you would have caught it, but if not see above.
Clay
THANK YOU SO MUCH. I’m just breaking into web development and this help out GREATLY.
again thanks
im trying to use your code for my website. im very new to web design and im still working on my first site. i don’t have it uploaded yet so im still pulling it out of a folder on my computer, but it won’t center with the code up above. will it only work when it’s uploaded?
hello
i am trying your example code to center my website but it’s not working. can someone please have a look at my code and see what i should be adding or taking out at http://www.gracefullearning.com/index.html. i tried changing my DOCTYPE to be exactly like yours but then my images jumped all over the place, so i had to put back my original DOCTYPE.
ps: can you please example in simple dummy terms as i didn’t write my original code it was generated from a free website design program.
thanks
grace mrspuff@gmail.com
Hi, thanks for the info.. I found that wrapping /putting in a container alot on the internet. But that means I can’t use position:absolute with that (obviously)..
@tk maybe that’s your problem too
so i can’t position the images and text right.. i started css and always used position:absolute.. cause that’s how I can control the layout to the very last point… so i don’t get it… when you center how can you still put e.g. the menu on the left hand side and the content on the right… i dont want to do relative positioning like div.menu{ height:200px; …} and div.content{top: -200px;…} to get to the top again…
I tried to read myself through code of websites.. but they use either a lot of script or are way too confusing… is there an easy way ?
i propably am a lost cause… but if you have a simple way to explain.. or a link where i could find sth. i’d really appreciate it.
Hi using position absolute for your whole page really is a non starter it should be used as a last resort and you can position everything to the pixel using css anyway the only thing i use css for is the drop down menus.
@david: No more messing with div wrappers! Thanks!
Hey! Thank you so much for this. I am an eigth grader working at a project based school called Valley New School. We are able to choose our own projects to work on and I have alwyas been interested in HTML and CSS so I started making an add on to our website and I went on a widescreened computer and the thing blew up, but after using this and doing a little tweaking I love it! Thanks so much again!
Hello I am trying to figure out how to to insert the wrapping. I need to center all of the pages for the site.
I am not sure if I put it on each page or on the layout.css. Please help
Layout.css:
#container {
background: #fff;
position: absolute;
top: 304px;
left: 326px;
width: 660px;
height: 973px;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
line-height: 16px;
}
#Xavier_Pg_Header{
background: #fff;
position: absolute;
top: 248px;
left: 232px;
width: 331px;
height: 23px;
font-size: 18px;
font-family:Arial, Helvetica, sans-serif;
line-height: 16px;
font-style: normal;
color: 4b5180;
font-weight: bolder;
text-transform: capitalize;
}
#Product_Header{
background: #fff;
position: absolute;
top: 277px;
left: 326px;
width: 458px;
height: 23px;
font-size: 18px;
font-family:Arial, Helvetica, sans-serif;
line-height: 16px;
font-style: normal;
color: 4b5180;
font-weight: bolder;
text-transform: capitalize;
}
#BoA {
background: #fff;
position: absolute;
top: 286px;
left: 232px;
width: 200px;
height: 200px;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
line-height: 16px;
color: 4b5180;
}
#ContactUS {
background: #fff;
position: absolute;
top: 275px;
left: 232px;
width: 777px;
height: 696px;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
line-height: 16px;
color: #4b5180;
}
#CoreFI {
background: #fff;
position: absolute;
top: 300px;
left: 327px;
width: 670px;
height: 696px;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
line-height: 16px;
color: #4b5180;
}
#Cust_Prod {
background: #fff;
position: absolute;
top: 306px;
left: 327px;
width: 670px;
height: 292px;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
line-height: 16px;
color: #4b5180;
}
#EMB_SEC_Prod {
background: #fff;
position: absolute;
top: 301px;
left: 324px;
width: 670px;
height: 416px;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
line-height: 16px;
color: #4b5180;
}
#HQHY_Prod {
background: #fff;
position: absolute;
top: 302px;
left: 327px;
width: 670px;
height: 696px;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
line-height: 18px;
color: #4b5180;
}
#Disclaimer {
background: #fff;
position: absolute;
top: 250px;
left: 225px;
width: 670px;
height: 696px;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
line-height: 16px;
}
#Index_Home {
background: #fff;
position: absolute;
top: 228px;
left: 295px;
width: 550px;
height: 333px;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
line-height: 24px;
}
#IntheNews {
background: #fff;
position: absolute;
top: 279px;
left: 233px;
width: 666px;
height: 313px;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
line-height: 16px;
}
#OurPeople {
background: #fff;
position: absolute;
top: 276px;
left: 233px;
width: 788px;
height: 915px;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
line-height: 14px;
color: #4b5180;
}
#AboutUS_TxtBox1 {
background: #fff;
position: absolute;
top: 235px;
left: 234px;
width: 865px;
height: 113px;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
line-height: 17px;
}
#AboutUS_TxtBox2 {
background: #fff;
position: absolute;
top: 363px;
left: 233px;
width: 494px;
height: 269px;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
line-height: 20px;
;
color: #4b5180;
}
#AboutUS_TxtBox3 {
background: #fff;
position: absolute;
top: 662px;
left: 234px;
width: 863px;
height: 118px;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
line-height: 17px;
}
#AboutUS_TxtBox4 {
position: absolute;
top: 342px;
left: 774px;
width: 208px;
height: 327px;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
line-height: 10px;
}
#Prod_Nav {
position: absolute;
top: 303px;
left: 214px;
width: 97px;
height: 428px;
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
line-height: 13px;
color: #4B5180;
font-style: normal;
font-weight: bolder;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
@Chris Coyier: Hi Chris, Perhaps you can help me. I’d greatly appreciate it. Aside from the obvious, what is the difference between….
and…
I’m not sure when I should use what.
What is the difference between…
DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”
“http://www.w3.org/TR/1998/REC-html40-19980424/loose.dtd”
When should I use either? Greatly appreciated if you could help.
So helpful. I am not a schooled programmer or designer, but found myself in the position where to cut costs I have to do it myself. Thanks so much. Just what I needed.
I’m using IE and like all the other codes I’ve been trying this code only works on the left margin. The right margin doesn’t change (The page just stretches to make room for the text insteadof putting in lines).
Any ideas??
@david: Can you look at my site and tell me how to center it? I purchased the template and can’t figure it out. I tried inserting the wrappers, but don’t know how/where to declare “wrap”. Thanks.
Thank you so much!! This was exactly what I needed and it was very simple to do!
Many thanks!!! :)
David!
God Bless you!!
Three sleepless nights trying to figure out everything possible in CSS… then finally tried to search search engine for answers…
So I feel very lucky today!
Thank you so much. It’s really very easy… when you know it. :))
Warm wishes from Russia.
Regards,
Liana
Duuuuuuuuuuuuuude!
Big thanks to you!!! I was ready to punch my keyboard in the left ventricle until I found this.
XD
Hi everyone (and David! :)
I have centered the pages allright.. but now I have a “little” problem:
all pop-up windows now look bad. I mean, chat window, message window, etc.
Earlier, all their contents fit nicely inside of the popup box. Now – it’s all goes by specified global settings, 1024 pixels.
Popup boxes remained the same size, I’m talking about their contents only – they all spread up within 1024px, centered.
Any idea how to fix it?
(and I’m not a programmer, just a person with some brain; so plain English is greatly appreciated)))
Thank you!
I have tried everything to center my website http://www.mytiedyes.com is there any way that you guys can help me. I built the site from scratch using notepad and Firefox with the free XHTML and CSS lessons from the W3C. I’m sure I have some sort of conflict going on but I can’t seem to find it. Peace.
Ok – that answered by question on how to center a website correctly.
I solved my problem by starting a site in a WYSIWYG site designer that I set up the initial page properties to be centered. I then located the snippet of code that centered the page I created and pasted it into my already existing pages right after the head. Put in the closing tags and “BAM!”…centered every page on the site. Now I can move onto version 2.1 for my site(and keep on studying). Peace.
I have done this coding exactly as you say, yet in internet Explorer my site will not center..
I have validated my coding and css and no errors appear, yet it still will not center.. could you help me as to why?
THANK YOU THANK YOU! I am used to working with Joomla CMS based sites, so when a facelift to a pure HTML site was thrown my way, this was JUST what I was looking for. Awwweeesomeeee!
Thanks. I added the code plus the part in a comment to always show scroll bar into a page, here: http://other.kcmartz.com/center-site.txt
thanks!!
Hi,
Thanks for this codes. One thing, can you please tell me where to put the wrap? I don’t where to put it… I am using html.
Thanks a bunch!
Janey
Hey, thanks for the css, it’s working well. The only thing I’m having trouble with is that the “#wrap” is about ten pixels from the top of the page and even if I specify “top:0px”; it won’t start right at the top. I’m sure it’s a quick fix, but I can’t figure it out – can you, or anyone else, help me with this?
Thanks!
-Demara
Your code above, DID NOT work with IE6 or Firefox.
I do like the old <center></center> but since it is dep’d,
I am searching for the best way to do this with CSS.
Most sites are not accomplishing this.
Their stuff doesn’t work.
is this centered?
Code that does work, though it is alot, all I can find so far. It works with IE+ and Firefox.
body {
text-align: center;}
#container {
width: 700px ;
margin-left: auto ;
margin-right: auto ;}
words centered?
wow I did wrap everything in code not code tags but it didn’t show,
sorry folks, guess you need to more than HTML,CSS, or javaScript to post here.
I am not versed in PHP etc.
soo thanks all
bye now
Many thanks, David. The center trick works so well … I have been searching for this and your post is great help. Thanks again!
my suggestion is:
/* your site here */
in css:
#center
{
position:absolute;
left:50%;
margin-left:-800px; /* here put the width of your site */
}
cheers!
There are regularly changes on the web. I can’t predict which should transpire tomorrow. No crystal ball right here.
Hi just wanted to give you a quick heads up and let you know a few of the pictures aren’t loading correctly. I’m not sure why but I think its a linking issue. I’ve tried it in two different web browsers and both show the same outcome.
So i understand the code for centering and it works… unless I put a second ap div box inside of the centering div box. for example
and in ‘div1′ I have formatting coordinates. but then the div1 doesn’t respond to the wrap div. Why isn’t this working for me?
Thanks in advance
Awesome!! Tried a lot of complex stuff which ended up with no results.. This worked perfect!! Thank You :)