Stretchable pages
Words by Daniel Aleksandersen on 2006-08-10
Many Webpages are what we call stretchable
. This means that their width is variable and not a fixed value. The page then conforms to the width of the readers browser-window and screen resolution.
A huge problem with these pages is that they work exactly like rubber bands. They will stretch and stretch until they finally break.
Here is how to prohibit these stretchable sites to be stretched too far:
max-width: 900px;
This single line of CSS styling gets left out almost every time, by almost every Web designer. By setting max-width the page effectively gets a maximum size, keeping it from stretching infinitely. The max-width should always be given a fixed value. That way the page will look more like it was intended to look like on widescreen enabled devices and projectors too.
Note that older Web browsers tends to have very limited support for max-width, but as these Web browsers would normally run on old computers, using small monitors – it is not a real problem.
3 comments
Great metaphor. And yes, so simple to implement, yet so few do it.
Christian at 2006-08-10 @826.
I am pretty sure this breaks in IE, am I correct? It is definitely good to have - but I think you have to do some workarounds for IE 6+.
Nate K at 2006-08-10 @854.
[...] Read the whole story, courtesy of The Web Design Journal. [...]
webdev » Avoid rubber band layouts at 2006-08-10 @098.
Leave your comment