Centering your content
One of the most asked questions is "how do I center my content?"
By "centering" we mean keeping all the content centered in the browser viewing area even at different resolutions and even if a user re-sizes the page.
By using a CSS "wrapper" this is very easy to accomplish.
There are basically 2 methods - a "liquid" or "fluid" method and a "rigid" method.
The "liquid" method adjusts the content width on the fly by having the content width be always a certain percentage of the entire viewport width.
This a accomplished by using the following code:
THE HTML:
<div class="wrapper"> all page content goes here </div>
THE CSS
div.wrapper {
margin-left : 10%;
margin-right : 10%;
}
This makes the width of the div.wrapper always 80% of the viewport width, whatever it may be.
However more designers prefer the "rigid" method which sets the content to a specific pixel width.
"Rigid" in this case means setting the "wrapper" to a specific width that will fit most common broswer resolutions without causing a horizontal scrollbar to appear.
It used to be the most common screen resolution was 640px wide. Today however it is much more common to have a 800px or 1024px width. It is not however a good idea to set this width wider like 800px because even with a browser maximized window there are still pixels being used for the vertical scroll bar.
To account for this you should use a width of no more than 770px.
How about the user that has his resolution set at 1024px?
If the user maximizes their window that leaves appx 230px of horizontal window space left over. It has to go somewhere.
The cleanest solution is to split this blank space in half and put it equally on either side of the wrapper. However we can't use ordinary margins to do this.
Percentage sized margins won't work with a pixel-sized wrapper.
CSS to the rescue....
CSS has a property called "auto" for margins. If the values for the side margins are set to "auto" the resulting side margins become equal and automatically fill the remaining horizontal space, giving us one centered box and equal margins on either side. Just what we want.
This works great in most modern browsers, BUT all versions of Internet Explorer/Win previous to version 6 do not support "auto" margins. Even IE6/Win will fail if the browser is not in "standards" mode based on the doctype of the web page.
So how do we get around this?
Well IE has a bug in it that lets us make a CSS hack to fix this problem.
The CSS property "text-align" can have values of left, right, center, justify, and inherit. This property is normally applied to a block level element such as a paragraph. This causes all the inline content within that element to be aligned with the value assigned to it.
However IE/Win browsers incorrectly apply this property to ALL the elements in the "text-align" box and not just the inline content as it is supposed to.
Do you see what this means - IE/Win fails to support "auto" margins, BUT, it does incorrectly center boxes when they are nested inside another box that has "{text-align : center;}.
So how do we use this to get our centered wrapper. We set the body to text-align : center, and then use the wrapper to reset our text to align left.
THE HTML:
<body>
<div class="wrapper"> all content goes here </div>
</body>
THE CSS:
body {
text-align : center ;
{
div.wrapper {
text-align : left ;
margin-left : auto ;
margin-right : auto ;
}
Now we have a web page with all the content centered in the broswer window with even margins on both sides.
Almost finished. There is one other minor problem that has to be addressed.
Gecko-based browsers (Firefox, Netscape, Mozilla) have a problem when using auto side margins. They interpret it very literally.
What happens is, if the user narrows the page to less than that of the wrapper width, these browsers will let the content flow off the left and right sides evenly. This means that a horizontal scroll bar will appear and let you scroll right to get that content, but the content sent to the left disappears and cannot be retrieved.
There is a way to fix this problem.
The easiest method is to set a minimum width on the body element that is the same width as our wrapper.
So our final markup looks like this:
THE HTML
<body>
<div class="wrapper"> all content goes here </div>
</body>
THE CSS
body {
text-align : center ;
min-width : 770px ;
}
div.wrapper {
text-align : left ;
margin-left : auto ;
margin-right : auto ;
}
There is also a method of using a border around your wrapper so you don't need the min-width property, but it introduces another IE/Win bug and hack.
For now just stick with the above it will work on all browsers under any operating system.
Mike...
