Flash and PHP Bible

The Flash and PHP Bible has been released! The book can be found on Amazon or wherever fine books are sold in your area.

The Flash and PHP Bible has a forum for quick support.

Centering sites using CSS

Centering sites using CSS

Center your site using CSS and drop the "center" tag.

Here is the CSS we will use

#wrap {
    width: 760px;
    margin: 0px auto 0px auto; /* top, right, bottom, left */
    padding: 10px;
    border: 1px solid #000;
    background-color: #eee;
}

This is the HTML to use on your site

<div id="wrap">
<!-- YOUR SITE CONTENT GOES HERE -->
</div>

The "wrap" or box will be horizontally centered in the browser. Now in modern browsers you could stop here but we don't want to forget about the others that have a lack of CSS2 support.

A great article addresses this fact so I will link you to that now. http://bluerobot.com/web/css/center1.html

That is all it takes to center your designs in most of the browsers.

Next time we will tackle relative font sizes using percents instead of pixels.

Follow Scriptplayground on Twitter (@scriptplay)

Comments: Centering sites using CSS

Jer Sun Jul 30, 2006 3:11 pm

You may also want to include

body {
padding:0;
margin:0;
text-align: center;
}

This will clear the various margins and padding that different browsers use by defult.

Alex McKee Fri Aug 4, 2006 8:55 am

You can condense this wrap code somewhat:

#wrap {
width: 760px;
margin: 0px auto;
padding: 10px;
border: 1px solid #000;
background: #eee;
}

Busbu SEO Challenge Sun Aug 3, 2008 12:36 am

Sometimes the code above doesn't work in other browser. You need to put a text-align: center to make it work.

sanjay gupta Thu Dec 10, 2009 6:47 am

Hello
Thanks alot, the articles of your site is really helpful and usable for visitors.
This site http://www.paganshop1.com/ is more helpful for amazing success and intense of luck charm.
All of spells of site http://www.paganshop1.com/ are original and very powerful and all come with a guarantee.
I want this http://www.paganshop1.com/ to be a place where you feel safe and happy and be a part of something very special indeed.

Sanjay Gupta
Software Test Engineer
gupta.sanjay31@gmail.com

sanjay gupta Thu Dec 10, 2009 6:47 am

Hello
Thanks alot, the articles of your site is really helpful and usable for visitors.
This site http://www.paganshop1.com/ is more helpful for amazing success and intense of luck charm.
All of spells of site http://www.paganshop1.com/ are original and very powerful and all come with a guarantee.
I want this http://www.paganshop1.com/ to be a place where you feel safe and happy and be a part of something very special indeed.

Sanjay Gupta
Software Test Engineer
gupta.sanjay31@gmail.com

Add a comment

Name:
Website:

Comment:

Please note: Offensive comments, flaming and spamming is not permitted on this site and your comment will be deleted immediately.

HTML is not allowed.

Please provide all comments in English so that others can help you. A common helper in this is to use an online translator.

As a security measure your ip will be recorded.

Anti-Robot Check:

Enter the key you see above.

What is this?: This extra test has been added due to the recent explosion of spam.