Trouble centering your layout?

Posted in: How to

I have come across a number of websites and have helped a few people with this problem with not being able to center their layout – the correct way.

First things first you should be using a reset CSS such as Eric Meyer’s, this will get rid of unnecessary margins, padding etc that are default.

I like to create a div that everything gets “wrapped” in, for this we will use the ID wrapper. (remember you can only use ID’s once – class names can be used more than once).
Do not set a width to this and by default DIV’s are blocks and width is automatically 100%. Our #main-container will have a set width, margin 0 auto will center it.

For this tutorial I added a border to show that the container is centered. Then finally a class name main-content which has a padding of 20px so it’s not touching the edge.

That’s how you center a layout, leave a comment if you have any questions.

CSS

#wrapper{
background: #2A7D58;
}

#main-container{
width:960px;
margin: 0 auto;
color: #fff;
border:1px solid #fff;
}
.main-content{
padding:20px;
}

HTML

<div id="wrapper">
  <div id="main-container">
    <div class="main-content">
      <p>This is a centered layout!</p>
    </div>
  </div>
</div>

DEMO

Leave a Reply

Your email address will not be published. Required fields are marked *