Centered Div Layout
January 20th, 2013
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.
Our Goal
This is what the end result will look like.
Before We Start
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.
I also won’t be showing CSS styles that aren’t important to how centered divs work, like borders and padding that are there just for looks.
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.
Creating the wrapper
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; } |
CSS Explanations:
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.
Adding a banner
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; } #banner { /* unimportant styles here */ } |
Adding the Navigation
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; } #banner { /* unimportant styles here */ } #navi { width: 100px; float: left; } |
CSS Explanations:
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.
Adding the content area
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; } #banner { /* unimportant styles here */ } #navi { width: 100px; float: left; } #content { width: 360px; float: right; } |
CSS Explanations:
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.
Adding a footer
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; } #banner { /* unimportant styles here */ } #navi { width: 100px; float: left; } #content { width: 360px; float: right; } #footer { clear: both; } |
CSS Explanations:
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.
Conclusion
That was it! To sum it up, here are a few main points to remember.
- Setting left and right margins to auto will center div elements (i.e. margin: 0 auto;). For this to work, it must have a width, and it needs to be display: block (divs are block by default).
- Use a doctype! Otherwise, it will not work in older versions of Internet Explorer.
- Using clear (i.e. clear: both;) will make elements clear the floats so that they show up underneath properly.
- Always remember to contain your floats properly when using a wrapper element. These are a couple examples.
Leave a Reply