WWW FAQs: How do I make a fixed-width layout that doesn't "reflow" when the browser is resized?

2006-08-23: Though my own site uses a variable-width or "flowing" layout, some designers prefer a fixed-width layout in which text never "reflows" when the browser window is resized.

This is easy enough to accomplish with CSS. Just specify an exact width in pixels for a div element just inside your body element, and place all of your content inside the div, like this. I have specified a very narrow width to exaggerate the effect.

<html> <head> <title>Fixed width test</title> </head> <body> <div style="width: 200px"> This long sentence will break into several lines, because we have specified a 200-pixel width for the container. </div> </body> </html>

Are you choosing a fixed-width layout so that your text and images will be in exactly the same place in every browser? Think again. Not every browser will have the same fonts available or handle line breaks in exactly the same way. A fixed-width layout is not a good way to control precisely where particular words or images appear on the page. If you want something in an exact location, use CSS absolute positioning to put it there. If you want something to float at the right or left of the main flow of content, use CSS float positioning to accomplish that.

Horizontal Centering

This solution provides a fixed-width layout. But the layout appears flush with the left edge of the browser window. Most fixed-width layouts look best when horizontally centered in the browser window.

Can we fix it to support horizontal centering? Yes! We'll use a technique that works in both strict and quirks mode, both in Internet Explorer 5.5 and in newer Microsoft and non-Microsoft browsers. There is also a more elegant solution for strict mode. For complete information on this subject, see my article how do I center an element horizontally with CSS?

<html> <head> <title>Centered fixed width test</title> </head> <body style="text-align: center"> <div style="width: 200px; margin: auto; text-align: left"> This long sentence will break into several lines, because we have specified a 200-pixel width for the container. </div> </body> </html>

And that's it! you're ready to display your content in a fixed-width, horizontally-centered layout.

My examples here use inline styles for demonstration purposes. But of course you can also use a separate .css file. And I recommend that, because it makes it easier to redesign your site without editing many individual pages.

Share |

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!