Horizontally Center Your Website Structure Using CSS

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

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…..

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

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?

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

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;

}

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

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;
}

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