September 10, 2005
CSS Centered Layouts
September 10, 2005, 1:03 PM | 9 Comments
So you want to create a centered layout, but you don’t want to use a table to accomplish your goal. That’s fine, CSS has been the way to go for quite some time now, and centering your layout is actually pretty simple.
I’ll go through some examples and explain the old way of doing things, and the new way of doing things. If you’re new to CSS and wondering why using CSS is considered a better practice, you may want to take a look at some of the following articles:
- Throwing Tables Out the Window - By Douglas Bowman.
- Practical CSS Layout Tips, Tricks, & Techniques - By Bob Stein.
- Complete CSS Guide - by John Allsopp and Maxine Sherrin.
Old School
The old way of doing things was to create a table that took up the page’s entire width, and center another table that contains your content inside the first table. This is called table nesting.
<html>
<body>
<table border="0" width="100%">
<tr><td width="100%" align="center">
<table border="0" width="750">
<tr><td width="100%" align="left">
<p>YOUR CONTENT HERE...</p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
The better way of doing things is to use CSS for all (or as much as possible) of your presentation logic. If you’ve never used CSS before and are still doing things the ‘old school’ way, I promise you that once you get to know the inner workings of CSS, you’ll never go back. It will be a complicated frustrating journey (in much that same way that it was frustrating figuring out all the intricacies of using tables to accomplish your perfect layout), but New School is where it’s at.
New School
The first thing you’ll want to do to create your new centered layout is to create the page’s structure and markup. Our example will be very basic, but you’ll get the general idea of how to do things. The XHTML markup will look something like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Centered Layout Example 1</title>
</head>
<body>
<div id="Container">
<div id="Content">
<img src="/examples/images/reinspire_logo.jpg" width="291" height="74" alt="Reinspire Logo" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque est. In risus velit, nonummy a, rhoncus et, aliquam quis, nibh. Suspendisse nonummy dui id metus. Sed lacus urna, sollicitudin eget, blandit in, molestie quis, turpis. In ut risus. Pellentesque sodales magna at nunc. Nam dapibus magna quis augue. Integer in tellus vitae risus egestas porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
</div>
</div>
</body>
</html>
The code is fairly basic. We start off with a Document Type Definition (DTD) that tells the browser how to render the page. I’m using XHTML strict, which forces the browser to adhere to standards. (For more on DTDs, click here). What follows the DTD is your typical HTML code (html, head, title, body, etc.). Inside the body, you’ll notice two <div> tags, one called ‘Container’ and another called ‘Content’. The names really are not important, you can call them whatever you please. What is important is that you choose something logical so that when you go back to edit your code, you’ll be able to understand it quicker.
The Container <div> is really just a box to hold things (hence the name Container). It will be responsible for defining our page’s width, and for the actual centering of the layout.
The Content <div> will hold all of our page’s content. This can get more advanced as you go, and you can have any number of containers and content layers, but we’ll keep it simple for now.
Inside the Content <div> we have a logo and a paragraph of text. Again, this can get as intricate as you’d like it to be.
Click here to view the page sans style. It’s ugly, it’s plain, but it gets your content across to anyone, which is becoming increasingly more important as more people browse the web using mobile devices, screen readers or other tools. It’s called ‘Accessibility’ and regardless of what anyone has told you, it is important.
Adding Some Style
Now comes the fun part, making your simple, plain-looking static page look beautiful. You’ll want to decide whether you want the page to be a fixed width (defined size) or a fluid width (flexible, undefined size) page. For our example we’ll use a fixed width, but I’ll explain how to convert it to a fluid width page later. Add the following code in between the <head></head> tags of the HTML file we’ve already created:
<style>
BODY {
background: #555;
background-image: url(/examples/images/csscl_bg.gif);
margin: 0;
text-align: center;
}
#Container {
width: 750px;
margin: 0 auto;
text-align: left;
background: #FFFFFF;
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}
#Content {
padding-left: 10px;
padding-right: 10px;
}
</style>
That’s all there is to it, click here to see the example page.
Code Explanation
The first section of the CSS defines the visual presentation for the page BODY. This corresponds with the <body> tag in our HTML file.
BODY {
background: #555555;
background-image: url(/examples/images/csscl_bg.gif);
margin: 0;
padding: 0;
text-align: center;
}
First, I’ve set the background to a dark gray colour, defined by the value #555555. (background: #555555;). The ‘#555555’ value is an RGB Hex code. (For more information on RGB Hex codes, click here and here). Next, I set a background-image for the body. (background-image: url(/images/examples/csscl_bg.gif);)The reason I defined the background colour first is so that if any visitors have images turned off in their browser, they’ll see the page background colour. (If the images were turned off, and I hadn’t defined a background colour, it would default to whatever colour the browser uses as a page background default - usually white)
Next, I set the page margin and padding values to 0, this will remove the default margin that each browser places on a page. (If you’re wondering, this is similar to using <body marginheight=”0” marginwidth=”0” topmargin=”0” leftmargin=”0”>).
Finally, I default the text alignment property for the body to center. (text-align: center;). This will cause everything to be centered… sort of. (We’ll get to that in a minute).
Now that we’re done with the <body> stuff, we move on to style the Container.
#Container {
width: 750px;
margin: 0 auto;
text-align: left;
background: #FFFFFF;
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}
As I stated before, we’ll be using a fixed-width layout, so I’ve given the container a width of 750 pixels. (width: 750px; – As a rule of thumb, I’ll usually choose a value of less than 765 pixels for my width. This ensures that anyone who is using a resolution of 800x600 or higher will see all of your content when their window is maximized. Most people no longer support a resolution of 640x480 anymore, as hardly anyone uses that particular resolution. Even 800x600 is almost considered outdated).
Here’s where the magic happens! (margin: 0 auto;). This sets the top and bottom margin for the Container to 0, and the left and right margins to auto, which will cause it to center in the browser.
We then reset the text-align property to left (text-align: left;), so that all of the content in the Container (and any elements contained in it, such as the Content <div>) is left aligned. If we left this out, all of the content in the Container will be centered due to the centering inherited from the BODY.
The rest of the code just creates a white background color for the Container (background: #FFFFFF;) and sets a left and right light gray border (border-left 1px solid #CCCCCC;, border-right: 1px solid #CCCCCC;). These attributes are purely for presentation and are not required to make your centered layout. They just provide a good way of seeing where the separation is between the BODY and the Container. (Note: If I hadn’t set a background colour on the Container, the BODY’s background, image or colour, would show through).
Now, I said above that the text-align: center; property that was defined for the BODY would center everything. That is really just a half truth. Text-align is really just for aligning text. The actual centering of the Container is done by the margin: 0 auto; property declaration, which is interpreted just fine by modern browsers. The reason we set the text-align to center for the body is that that line needs to be there is for users using IE5/Windows. Without it, strange things happen.
So, that’s all there is to it! The remaining style for the Content layer is just for presentation.
#Content {
padding-left: 10px;
padding-right: 10px;
}
This creates a bit of space (or padding) between the left and right edges of the Content layer and the actual content of the Content layer. It just makes it a little more readable that way, rather than having the content right up against the left edge of the Container.
From Fixed to Fluid
If you’d like to create a fluid layout rather than a fixed layout, all that needs to be done to accomplish this is changing the width of the Container from an absolute value (750px) to a percentage. For my example, I’ve used a value of 95%. This will mean that your centered Container’s width will always be 95% of the total browser width. When you resize the browser window, the width of the Container will change. In the fixed width version, resizing the browser will not change the width of the Container because we gave it an absolute value.
Fixed:
#Container {
width: 750px;
margin: 0 auto;
text-align: left;
background: #FFFFFF;
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}
Fluid:
#Container {
width: 95%;
margin: 0 auto;
text-align: left;
background: #FFFFFF;
border-right: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
}
Click here to see the fluid width version of our example.
Posted in: CSS, CSS Tips, Web Development