How to center the content of a web page

This question gets asked very often in the forums and newsgroups, and is very easy once you know how.

Create a "wrapper" div to hold all your content and apply its width property through CSS, then give it a margin:auto attribute

 
<style type="text/css">
  #wrapper {width: 760px;margin:auto}
  #content{background-color:red}
  </style>
  </head>
  <body>
  <form id="form1" runat="server">
    <div id="wrapper">
      <div id="content">
        content
      </div>
    </div>
  </form>
  </body>

Date Posted: 05 May 2007 20:48
Last Updated: 12 July 2010 06:22
Posted by: Mikesdotnetting
Total Views to date: 6184

Comments

12 July 2010 06:04 from Mikey

I don't know if this was intended, but in your snippet above. I think you have an extra <div id="wrapper">

12 July 2010 06:23 from Mikesdotnetting

@Mikey,

Thanks for spotting that. I have corrected it.

Add your comment

If you have any comments to make about this article, please use this form to do so. Make sure that your comment relates specifically to the article above. More general comments can be posted through the form on the Contact page.

Please note, all comments are moderated, and some may not be published. The kind of things that will ensure your comment is deleted without ever seeing the light of day are as follows:

Not relevant to the article
Gratuitous links to your own site or product
Anything abusive or libellous
Spam
Anything in a language I don't understand (English is best)

I do not pass email addresses on to spammers, so a valid one will assist me in responding to you personally if required.

Your name:

Your email address:

Your comments:

2 + 3

Mikesdotnetting

Tags

My Book

Blogs

How to center the content of a web page

Comments