Centering a layout that is completely made up of divs is possible, and this will show how to make a very basic centered div layout. It uses an outer container that wraps around a banner, navigation, content area, and footer.
This is what the end result will look like.
For simplicity, this tutorial will not be showing code above and below the body tags (like <html>, <head> <title>, and <body>). Basic stylings like font, header, paragraph, and lists are also not shown. This way the focus is on the structure of the layout.
However, please be sure to use a doctype. If you don't, you may face problems in Internet Explorer, especially older versions that do not support centered div layouts without a doctype. See this page for doctypes to use.
If you haven't already, please be sure to check the tutorial on containing floats. This tutorial makes a layout that has floated elements, so it's important to know how the wrapper contains them properly.
I will be calling the outside container of the layout, wrapper.
| HTML | CSS | |
|---|---|---|
|
<div id="wrapper"> </div> |
#wrapper { width: 500px; margin: 0 auto; overflow: hidden; border: 1px solid #000; padding: 10px; } |
width - For the div to center correctly, you must specify a width.
margin - This is what centers the layout. Margin is space added outside of a container. When it has 2 attributes, it reads as top/bottom left/right. In other words, we set the top and bottom margins to 0px, but set the left and right margins to auto. The left and right margins will automatically adjust so that they fill the rest of the room. Since they are both auto, they become equal in width. This causes the div to be centered.
overflow - As discussed in the containing floats tutorial, using overflow: hidden is one way of containing floats properly.
border - This adds a 1px, solid line border in black (#000000).
padding - Padding is space that is added inside the container. When it just has one attribute, it applies it to all sides. This means top, right, bottom, and left all have 10px of padding.
This part isn't anything special. I will just add a div block that will act as a banner.
| HTML | CSS | |
|---|---|---|
|
<div id="wrapper"> <div id="banner"> Layout Header </div> </div> |
#wrapper { width: 500px; margin: 0 auto; overflow: hidden; padding: 10px; } #banner { padding: 5px; margin: 0 0 10px; border: 1px solid #888; text-align: center; } |
margin - When there are 3 attributes, it reads as top left/right bottom. This is setting the bottom margin to 10px, and everything else to 0px.
text-align - This centers the text.
Since our example uses a left navigation, we will add a div block that is floated left.
| HTML | CSS | |
|---|---|---|
|
<div id="wrapper"> <div id="banner"> Layout Header </div> <div id="navi"> <ul> <li> One </li> <li> Two </li> <li> Three </li> <li> Four </li> <li> Five </li> </ul> </div> </div> |
#wrapper { width: 500px; margin: 0 auto; overflow: hidden; padding: 10px; } #banner { padding: 5px; margin: 0 0 10px; border: 1px solid #888; text-align: center; } #navi { width: 100px; float: left; border: 1px solid #888; padding: 5px; margin: 0 0 10px; } |
float - When floated left, the navigation is aligned to the left but is still in the page flow. This means the rest of the page's content will flow to the right of it.
Since the navigation is on the left, we'll put the content on the right by floating it to the right.
| HTML | CSS | |
|---|---|---|
|
<div id="wrapper"> <div id="banner"> Layout Header </div> <div id="navi"> <ul> <li> One </li> <li> Two </li> <li> Three </li> <li> Four </li> <li> Five </li> </ul> </div> <div id="content"> <p>Content area is here!</p> <p>This is space filler!</p> <p>So is this!</p> </div> </div> |
#wrapper { width: 500px; margin: 0 auto; overflow: hidden; padding: 10px; } #banner { padding: 5px; margin: 0 0 10px; border: 1px solid #888; text-align: center; } #navi { width: 100px; float: left; border: 1px solid #888; padding: 5px; margin: 0 0 10px; } #content { width: 360px; float: right; border: 1px solid #888; padding: 5px; margin: 0 0 10px; } |
float - As with the navigation, the content area is still in the page flow. Since it's floated right, it's aligned to the right.
The last part is to add a footer that sits below the navigation and content.
| HTML | CSS | |
|---|---|---|
|
<div id="wrapper"> <div id="banner"> Layout Header </div> <div id="navi"> <ul> <li> One </li> <li> Two </li> <li> Three </li> <li> Four </li> <li> Five </li> </ul> </div> <div id="content"> <p>Content area is here!</p> <p>This is space filler!</p> <p>So is this!</p> </div> <div id="footer"> This is a footer. </div> </div> |
#wrapper { width: 500px; margin: 0 auto; overflow: hidden; padding: 10px; } #banner { padding: 5px; margin: 0 0 10px; border: 1px solid #888; text-align: center; } #navi { width: 100px; float: left; border: 1px solid #888; padding: 5px; } #content { width: 360px; float: right; border: 1px solid #888; padding: 5px; } #footer { clear: both; text-align: center; border: 1px solid #888; padding: 5px; } |
clear - Clear is used to clear floated elements. You can think of it as a way to place elements so that they end up underneath floated elements instead of next to them. I set it to both so that it clears both left and right floats.
That was it! To sum it up, here are a few main points to remember.