Centered web page layout - CSS absolute position

Centering a fixed-width webpage using absolute position

Last updated on December 15, 2009. Tags: centering webpage, CSS layout, tableless web page layout

In one of my earlier tutorials, I discussed how to center a fixed-width website using auto margin. In this tutorial, we will cover the other way of centering a fixed-width website; the way in which we will be using absolute position.

Similar to the the earlier method of centering a webpage layout, the CSS codes of the outermost block element (which contains all other block elements) determines the position of the other elements within the webpage. The CSS codes that center the outermost block element is shown below.

#wrapper {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -350px;
	width: 700px;
	padding: 0;
	border: 0;
	background: #c0c0c0;
}

You can see a sample webpage being centered by absolute position by clicking here.

This is a little bit complicated than the centering using auto margin. Similar to several other tutorials in this website, the div id="wrapper" is the outermost block element. The first four lines of codes are the ones that cause the centering of the webpage. The fifth line is also important, because it is what determines the value in the fourth line (it's always half of the value with some minor adjustments if the padding and border are not zero).

By using position:absolute, the CSS is telling the browser that it will dictate the exact location of the layout (outermost block element and everything in it) within the browser window.

The second line top:0; states that the position should be zero pixels away from the top of the page. Hence, there is no space between the header block and the top of the browser's window. Of course, you can adjust it in case your design needs some space on top.

The line left:50%; moves the layout in such a way that its left end is at the center of the browser. Note that it remains at the center even if you enlarge or reduce the size of the window.

Since the left end is the one aligned to the center, we need to adjust it so that the center of the layout is aligned to the center of the webpage. The fourth line did the adjustment by using a negative margin. The negative left margin is usually equal (ignore signs) to the half of the width of the outermost block element. For example, if the width is 700 px, the margin-left should be -350 px. You can do some minor adjustments depending on your design.

Alternatively, you can replace the margin-left: -350px; with margin: 0 0 0 -350px;.

Advantage:

This method of centering the webpage has two notable advantages as compare to the one that uses auto margin:

If you intend to make the outermost block element visible (as having a border or as holder of certain background images), you will clearly see it (outermost block element) surrounding all the other block elements or divisions. It does not compress to the top as seen in Firefox and Safari unlike the auto margin method.
If you're into the kind of design with not just fixed width but also fixed height, you can use this method to center the webpage horizontally and vertically as shown in this sample webpage. The CSS code is shown below. Notice that the top property is 50% instead of zero and the top margin is -235px, which is half of the height. It is essentially the same principle as in horizontal centering.

#wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -235px 0 0 -350px;
	width: 700px;
	height: 470px;
	padding: 0;
        border: 0;
	background: #c0c0c0;
}

Disadvantage:

Depending on your target audience and their habit with regards to resizing the browser window, this disadvantage may or may not be something serious.

In using auto margin, whenever you reduce the width of the browser window to the point that it is smaller than the width of the outermost block element, the horizontal scroll bar that appears at the bottom allows you to see the left and the right area of the webpage, which still enables you to read all the parts of the webpage.

However, in case of centering using absolute position, the horizontal scrollbar that appears allows you to access only the right parts of the page. The left parts of the page that was moved beyond the left end of the browser window is no longer accessible.

My usual advice is to design for 1024-pixel width monitor, but it's up to you to decide if you still want to consider the very few who are still using 800-pixel width monitor or if you expect most of your visitors to be using something bigger than 1024-pixel width monitor and would like to design taking only them into consideration.

Posted by Greten on December 1, 2008 under Cascading Stylesheet (CSS)

Share and Enjoy: