I have noticed lately that centered website design layouts are becoming more and more popular. Centered layouts are pleasing to the eye, and can also be used to take advantage of wider screen resolutions. There are several techniques we can use to achieve a centered layout, but we’ll just take a look at the easiest method here. (Once again, this tutorial assumes that you have a working knowledge of CSS such as that provided in the course offered on this site.) Using a fixed-width container we can achieve our centered layout quickly and easily:
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Centered Layout</title> </head> <body> <div id="container"> <!--All of our content goes inside here--> </div> </body> </html> |
Next, we need to create a style rule for our container that gives us a fixed width and centers the content.
1 2 3 4 5 | div#container { margin-left: auto; margin-right: auto; width: 700px; } |
As we can see the declarations “margin-right:auto” and “margin-left:auto” do the heavy lifting. It’s really that simple.
Now before everyone starts emailing me saying this method does not work in IE5, I would submit most respectfully that I don’t care. My personal policy on web design is to provide support for 2 versions back. In other words, IE5 and IE6 are dead to me. It’s time to move on, people!
Steven Taylor taught himself web design before there were any formal courses in the subject. Over the last 10 years he has designed over 250 sites, and developed countless web, mobile and desktop applications. He is the co-founder and CTO of the 