css/xhtml formatting oddity


A student emailed me last night, frustrated because adding an XHTML doctype to his document had caused it to stop formatting the way he wanted it to.

He had a content div in the center of the page, and he wanted it to display at 100% of the browser window. He had properly set the height of the body element to 100%, and then set the content div to 100%, but it wouldn't work when the doctype was there; it defaulted to height:auto.

I played with it for a while, and finally got it to work by adding position:absolute and top:0px properties to the content div style.

Anybody know why the height:100% property only works when the element is being absolutely positioned?


The parent element seems to be <html>, not <body> as you might assume. (I had, as well.) Your <body> and <div> are growing to 100% height, but the <html> is only as big as it needs to be to fit the <div> at the bottom of the tree. I'm not very good at reading the spec, maybe someone with a little more patience could explain.

I created a few example pages: XHTML 1.0 Strict, HTML 4.01 Transitional, and Doctype-less. Only the last document does not set a height on <html>. I've set borders on the three elements to make them stand out from one another.

Caution on the .xhtml: I'm sending it as application/xhtml+xml, which might confuse some browsers.

The absolute best place to go with questions about CSS is the CSS-Discuss mailinglist. Here:


It's a very busy list, easily 50 mails per day, but any and all CSS related issues will be solved there.

As for the problem, it would help if we knew which browser (or all browsers?) this problem occurred in. IE for instance has a "quirks mode" that it goes into when there is no doctype specified, but when a doctype is correctly specified, it will go into "standards" mode.

Ick... I never thought I'd mention IE and standards in the same sentence without using the word "non-compliant" as well.

Thanks, Frank. I subbed to css-d earlier today, actually, for exactly that reason.

This happens in both Safari and Mozilla on my mac, on the students code and on my own super-simple test page. I haven't tested it yet on a PC browser, but I believe the student who emailed me is a PC user.

Here are the example files I created:

* No DOCTYPE, no positioning (div expands to full height of browser)
* HTML 4.01 Transitional DOCTYPE, no positioning (div shrinks to content size only)
* XHTML 1.0 Transitional DOCTYPE, no positioning (div shrinks to content size only)
* HTML 4.01 Transitional DOCTYPE, with positioning (div expands)
* XHTML 1.0 Transitional DOCTYPE, with positioning (div expands)

With the exception of the first (with the missing doctype), they all validate properly--HTML and CSS.

Is that the right "No DOCTYPE, no positioning" page? Safari is still having none of it. (not displaying the div at full height)

Hmmm. Yes, it's the no DOCTYPE page. Works as advertised in Mozilla, but you're right, in Safari it collapses again.

Consensus (here and on css-discuss) seems to be to go with setting the HTML height to 100%, as well.

I also had this problem a few weeks ago. Don't know why it doesn't work :(




Recent Photos

This is a Flickr badge showing public photos and videos from mamamusings. Make your own badge here.

Upcoming Travel

Creative Commons License
This blog is licensed under a Creative Commons License.

About this Entry

This page contains a single entry by Liz Lawley published on January 9, 2004 2:42 PM.

on love and flight was the previous entry in this blog.

sxsw roommate is the next entry in this blog.

Find recent content on the main index or look in the archives to find all content.