The Best Web Design Tips Blog



CSS 1 Column Centered Layout


Okay, we are going to jump right into this tutorial since it is pretty self explanatory. Creating a 1 column centered css layout is extremely simple and only requies a small amount of coding. Perfect for getting your design in the center of any moniter size.

The CSS

body {
text-align: center;
}

#Container {
text-align:left;
width:700px;
margin-left:auto;
margin-right:auto;
}

The HTML

<html>
  <head>
    <title>1 Column Center</title>
  </head>
<body>
  <div id=“Container”>
    <div id=“Content”>
BLAH! This is where you would actually put the content for your new 1 column centered layout!
    </div>
  </div>
</body>
</html>

Link to This Page: