The Hickensian

For a long time I'd wanted to achieve a vertical centering effect with CSS that I used to achieve with tables or frames. A fixed size block that floats dead centre in the browser window, no matter what its size. Techniques for horizontal positioning have been known for some time, with the 2 methods described on Blue Robot. Then I found across a piece on Web Page Design for Designers, outlining how to do this. Nirvana! It uses absolute positioning to put find the exact centre point of the window, and then uses negative margins to 'shift it all back halfway', producing the effect. It works, but there are 2 problems with this:

the problems

• As the CSS technique uses absolute positioning with negative margins, if the browser window is smaller than the centered content, it crops it off without giving you scrollbars to access it. I wanted the site to get a long 'panoramic' style, but I also didn't want to exclude users with 800x600 resolution. The fact that some users couldn't even scroll to see content was a big problem.
• In Interner Explorer 5 for Mac, if an XHTML doctype is used instead of HMTL Transitional (as used in the Web Page Design for Designers article), the content gets uncereromoniously pushed off the top of the browser window. While IE5 Mac is being phased out now that development has been stopped, its still the main browser for OS 9 users.

the solutions:

the cut-off content problem

The WPDFD technique uses 2 container divs - #horizon for the vertical and #content for the horizontal. Originally, these 2 divs were needed due to a bug in Opera. While this has since been fixed in version 7, there is another use for the extra container div.

Instead of using absolute positioning to center horizontally, use the auto margin method to centre the second <div> within the first. This is the best way, as it stops trying to centre the content when the window is too small. This still cuts of the the left hand side in Mozilla/Camino/Firebird, but all it needs is a 'min-width' value adding to the containing <div> to stop this.

Here's the new CSS:

#horizon {
	background-color: transparent;
	position: absolute;
	top: 50%;
	left: 0px;
	width: 100%;
	margin-top: -200px;
	text-align: center;
	min-width: 900px; 
}
#wrapper {
	background-color: #fff;
	position: relative;
	text-align: left;
	width: 900px;
	height: 380px;
	margin: 0px auto;
	}

The addition of position:relative in the #wrapper rule allows me to position everything inside it using position:absolute rather than floats, which makes life easier and accurate. You may not need this however. This solves the problem of content being cut off horizontally.

As for the vertical - you just have to make sure that you specify a height that will fit in your target market's lowest screen resolutions. I used 380px, which should fit in most browsers at 800x600 (once you've allowed for all that browser chrome).

IE5 mac and the commented backslash hack

To solve the IE5 mac problem, you need to use the commented backslash hack. First you add your style rules to work in IE5 mac, then you add your real styles rules, beginning with a backslashed comment and ending with a normal comment. IE 5 Mac ignores everything between the 2 comments, and these override the previous rules, providing the centering effect for all the other browsers:

 
 /* styles for IE 5 Mac */
 #horizon {
	background-color: transparent;
	position: absolute;
	top: 20px;
	left: 20px;
 }
 
 /* following rules are invisible to IE 5 \*/
 #horizon {
   top: 50%;
   left: 0px;
   width: 100%;
   margin-top: -200px;
   text-align: center;
   min-width: 900px; 
 }
 /* end IE 5 hack */ 
	  
#wrapper {
	background-color: #fff;
	position: relative;
	text-align: left;
	width: 900px;
	height: 380px;
	margin: 0px auto;
	}

As we've already stated rules like 'position: absolute' in the first set of style rules, we don't need to repeat these, only redefine rules that we want to change. So far I haven't been able to replicate the vertical centering effect, but at least it centres horizontally.