WWW FAQs: How do I force a minimum width for my page?


2004-08-25: normally, web browsers will try to lay out your text and images so that they fit in the available horizontal space. Some page designs do not respond well to this. It is possible to force the browser to lay out your content at a specific width via two methods.

The simple, elegant way that works with all modern browsers (now more than 99% of browsers overall) is to use CSS (cascading style sheets). Wrap your entire page in a <div> element with a width attribute, like this:

<div style="width: 2000">
Your page body goes here
</div>

Notice that a horizontal scrollbar appears to allow the entire 2,000-pixel width to be seen, even though the content in this simple example doesn't come close to requiring it.

The old-fashioned way that works with all web browsers, including truly ancient browsers like Netscape 4.x, is to use an image as a "brace" to prop the window open at the desired minimum width. Use a 1x1 transparent GIF image. Then use the following HTML:

<img src="transparent.gif" width="2000" height="1"><br>

This will force the page to be at least 2000 pixels wide, creating a scrollbar if necessary.

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!