!Doctype declaration breaks my layout. Huuu?

I finally got a 3 col layout to work with CSS, it validated through the W3C.org Validator as XHTML 1.0 Strict.

Now though, after I added the <!Doctype declaration my layout breaks.

The left and right sidebars, instead of staying at 100% height, collaps up to the bottom of the text.

Whhhyyyy???!!???

Try setting:


html, body { height: 100% }

Thanks for the tip.

I can’t understand why the <!Doctype statement is affecting the layout; Any ideas?

It only does this in NS, and Opera, works fine in IE.

Hi,

When you add a doctype the browser works in standards mode and most of the time won’t apply dodgy legacy behaviour . 100% height specifically is not as simple as you may think.

To be 100% high an element has to be 100% of something else. As you haven’t defined any height for any parent then the height collapses to zero. Without a doctype the browser will guess what you want which is why beginners often prefer quirks mode because it lets them get away with bad coding.

While thats good for beginners its bad for structured code :slight_smile:

Have a look a the faq on 100% height for a clear explanation.

If you are looking for equalising columns then you should look at the 3 col demos as wel for some hints and tips.

Hope that helps.

Paul

O.K. I see what’s going on now.

The body element is the parent element of my container div, and has to be 100% so my container can expand to 100% to allow my nested divs to expand.

The browser floated my container to the edge of the next known element, the sides, which then floated to the edge of the contained text.

But why did my center colum stay at 100%?

I think I know, it couldn’t collaps, because the two neighboring divs were supporting it’s box, since I had it between them, and display set to inline.

Now it makes sense.

Sure enough, setting the body to 100% with Puco’s tip straightened it right up.

They didn’t collaps in IE though, IE must of thought it had enough room, since it doesn’t add padding to width/height.

Either that, or it ignores standards.

Kind of the same difference though; Isn’t it?

I don’t think that MS ignore the recommendations W3C have set, although, they haven’t updated their rendering engine since 2001 IIRC. That explains its legacy behaivour and lacking support.

What I don’t understand is why it doesn’t have full support for CSS1…

Hi,

I think I know, it couldn’t collaps, because the two neighboring divs were supporting it’s box, since I had it between them, and display set to inline.

If the elements you are reffering to are floats as in your previous post then setting them to display:inline means nothing (other than it cures ie’s double margin bug). Floats are hard coded as display block and cannot be changed.

I think you need to read my faq on 100% height as you are still not quite sure of the workings :). Even if you accomplish 100% height for your columns in the manner you are trying you will not get anything more than viewport height (in good browsers) and the columns will not automatically grow together.

Paul

If this didn’t affect MSIE6, then I think you have entered a doctype that doesn’t switch MSIE into standards mode. You should have an URL in the doctype definition


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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Following on from Puco’s post here’s a good article by Eric Meyer that explains a lot about doctypes:

http://www.ericmeyeroncss.com/bonus/render-mode.html

Paul

<?xml version=“1.0” encoding=“UTF-8”?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Here’s the Doctype I used for the page, (with the character encoding above it).

Here’s the Doctype I used for the page, (with the character encoding above it).

More fun lol :slight_smile:

You have inadvertantly tripped quirksmode in ie6 because of the xml prologue (charactre encoding above doctype).

IE6 has a major bug in that the xml prologue trips quirksmode as ie expects a doctype to be first on the page. Also any comment tags above a doctype trip quirksmode also.

To keep ie6 in standards mode its best leave the xml prologue out as its optional anyway as long as you have the character encoding in the meta tag as per usual.

Paul