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. This book explains the process of working with PHP in Flash, while creating real world examples that you can actually learn something from.

The Flash and PHP Bible has a dedicated forum for support and comments.

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.

Print It

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.

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.

Scriptplayground Network

Flash and PHP Bible

Scriptplayground » tutorials » css » Centering sites using CSS

Centering sites using CSS

Comments: Centering sites using CSS