DOCType and Vertical Positioning

**dog** · 06-18-2007, 02:09 PM

Hello,

I want to position my page content inside a box that sits in the centre of the browser window. Example: http://ll.dc5b.com.

In the example the box holding the page content is placed inside a td and given a 'verticle-position: middle;'. See the example below:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>

<title>Example</title>

<style type="text/css">
body { text-align: center; }

table#centreHolder { height: 100&#37;; width: 100%;  }

table#centreHolder td { vertical-align: middle; }

div#containerBox {width: 600px; margin: auto; border: 1px solid black; } 
</style>
</head>

<body>
<table id="centreHolder"><tr><td>
  <div id="containerBox">SITE CONTENT</div>
</td></tr></table>
</body>

However when I use a 4.01 DOCTYPE it changes everything.
Example:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>Example</title>

<style type="text/css">
body { text-align: center; }

table#centreHolder { height: 100%; width: 100%;  }

table#centreHolder td { vertical-align: middle; }

div#container {width: 600px; margin: auto; border: 1px solid black; } 
</style>
</head>

<body>
<table id="centreHolder"><tr><td>
  <div id="container">SITE CONTENT</div>
</td></tr></table>
</body>

Can anyone offer me an alternative way of acheiving the same effect using a 4.01 doctype?

Thanks,
dog

**alexjewell** · 06-18-2007, 02:52 PM

What changes when using a 4.01 doctype?

**dog** · 06-18-2007, 03:09 PM

Originally Posted by alexjewell

What changes when using a 4.01 doctype?

Two things actually. The 'vertical-align: middle;', seems to have no effect and also the 'text-align: center' from the body gets inherited by all the child elements.

**alexjewell** · 06-18-2007, 04:01 PM

ok, the vertical-align: middle is something I'm not entirely sure about.

To fix the child elements inheriting the text-align: center; do the following in your css stylesheet:

Code:

body *{
text-align: left;}

**jscheuer1** · 06-18-2007, 04:48 PM

As far as I know, there is no height:100% in HTML 4.01 unless the height of the container (in the case of your demo, the container is the body) is specified.

**Twey** · 06-18-2007, 05:37 PM

Hahahahaha, HTML 3.2 Final? Seriously? I didn't know anybody had actually used that within the past... eight years?

The latest well-supported DOCTYPE, and the one you should have been using for the past half a decade at least, is HTML 4.01 Strict.

It's very bad style to use tables for layout. Don't do this. Avoid pixel-sizing things too, as this results in fragile, inflexible designs. Try this page for an explanation of your vertical-align problem.

Originally Posted by jscheuer1

As far as I know, there is no height:100% in HTML 4.01 unless the height of the container (in the case of your demo, the container is the body) is specified.

The <body>'s height is considered to be specified at the height of the viewport.

**mwinter** · 06-18-2007, 05:57 PM

Originally Posted by Twey

The <body>'s height is considered to be specified at the height of the viewport.

100% of the height of the root element is the height of the viewport. For HTML, that's the html element.

**jscheuer1** · 06-18-2007, 09:15 PM

That makes it sound as though you could set the body's height to 100% and it would then be the height of its container, the HTML element and therefore the height of the viewport, but it isn't.

There was an oversight in developing the standard for HTML 4.01 in that you cannot vertically center unless you know the height of the content. Even then, you have to jump through hoops to do it and it has a nasty side effect when the viewport is shorter than the content.

Javascript can come to rescue, and in IE, using the expression technique in style, this can work out quite well, even though it is somewhat involved. In all others, you are left with content that must 'snap into place' onload.

Either way, it flops with javascript disabled.

If you must have content of unknown and/or of changing height vertically centered, I'd suggest sticking with quirks mode all the way:

Code:

<html>
<head>

<title>Example</title>

<style type="text/css">
#container {width: 600px;border: 1px solid black; } 
</style>
</head>

<body>
<table height="100%" align="center"><tr><td valign="middle">
  <div id="container">SITE CONTENT</div>
</td></tr></table>
</body>