Member Avatar for trandrewo

I am working on fairly standard layout where the "page" is centered in the window using a wrapper of 960px width (using margin:0 auto to center the wrapper).

In that wrapper, I have nested header, content, and footer divs that are set to a width of 100% (of the wrapper).

Everything works fine across all browsers until I apply a standard DOCTYPE:

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

When I do this, the nested divs (header, content, etc) take on the full width of the screen (rather than the width of the wrapper) in FF and Chrome (but still works fine in IE).

Any suggestions?

Thanks! - Trandrewo

  • 1 Contributor
  • 1 Reply
  • 101 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by trandrewo

Dani AI

Generated

Brief summary: this layout symptom—centered fixed-width wrapper with inner blocks set to fill it, then suddenly the inner blocks span the whole viewport after adding a proper DOCTYPE—was caused by a unit-related CSS error in the wrapper rule. As later found, putting the page into standards mode exposed that invalid declaration and browsers that follow the spec ignored it, so the inner elements ended up sizing relative to the document rather than to the wrapper.

Why that happens: length properties (width, height, margin in most cases) require explicit units; invalid declarations are dropped in standards mode. Older/quirks-mode behaviors in some browsers historically tolerated unitless numbers, which hides the bug until a real DOCTYPE is used. See MDN on values and units and why a DOCTYPE can trigger quirks vs standards rendering: and .

Quick troubleshooting checklist:

  • Inspect the wrapper in DevTools and look at the computed width and the Styles panel for crossed-out or missing width declarations.
  • Validate the CSS and HTML with the W3C validators to catch syntax errors: HTML Validator and CSS Validator.
  • Confirm the inner elements’ containing block (positioning/relative ancestor) — absolute/static positioning changes what 100% refers to: Containing block.

Best practices to avoid this class of bug: always include units for length values (except where the spec explicitly allows unitless numbers), put a standards DOCTYPE at the top of the document early during development, and use DevTools + validators as part of your workflow so these issues are caught quickly.

Member Avatar for trandrewo

Problem solved. In the CSS width was set to "960" instead of "960px". Once I added in the "px", everything worked. Should have had more coffee this morning...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.