How can I enforce wrapping the html content for a fixed width using CSS inside Body Tag?

Question

In my HTML document, I want to enforce fixed layout (250px width).

Would you please help me with a CSS snippet that can be used within a body tag so that the html content will be wrapped after a fixed width ?

For example,

<body style="width: 250px">

This snippet is working in Firefox perfectly, but it is not working in Internet Explorer. Is there any universal technique that will enforce the fixed width for all browsers ?

score 3 · Accepted Answer · answered Jul 25 '12 at 14:16

3

It won't work in IE if you have it in Quirks Mode. Make sure you have a <!DOCTYPE> and it should work fine.

answered Jul 25 '12 at 14:16

Niet the Dark Absol

320,036
81
464
592

Hi, Thanks for your reply. I did use in my html document and tested in IE 9, but I dont get that fixed layout. Is my – Emran Hussain Jul 25 '12 at 14:25
Try ` `. Hit F12 and check the Document Mode. – Niet the Dark Absol Jul 25 '12 at 14:31
Your doctype triggers quirks mode because you're missing the URI: ` ` Including the URI will cause it to trigger standards mode. Or, as mentioned, the HTML5 ` ` will do just as well, because it doesn't need a URI. – BoltClock Jul 25 '12 at 17:02

score 1 · Answer 2 · answered Jul 25 '12 at 16:08

The technique that works on all CSS enabled browsers, even old versions of IE, is to introduce intermediate markup, e.g. <body><div id="body">...</div></body>, and set the width on that element, e.g. #body { width: 250px; }.

In Quirks Mode, IE treats the body element as the root element, hence apparently ignores e.g. the width property on it.

How can I enforce wrapping the html content for a fixed width using CSS inside Body Tag?

2 Answers2