The advent of table-free pure CSS layouts has been great for those browsing with non-PC environments (handhelds, etc.) as they allow cleaner more structured mark-up. However, in normal browsers, even the most beautiful flexible-width CSS layouts get wacky when the window gets too narrow.
Wide-body CSS
Posted by on Tuesday, July 22, 2003 - 14 comments
Take, for example, Doug Bowman’s Stopdesign site and his client’s site, Wired News (I’m not picking on Bowman — in fact, I chose these sites because his design and CSS is so great, it makes for a good example). Both of these sites use CSS for layout, look fantastic, and are flexible width (all good). However, when you shrink your browser window too narrow (200~300px), elements start to wrap, and this generally get jumbled (see a screenshot of several examples include some of our own sites).
This usually isn’t a problem, as no-one with a modern CSS-aware browser is looking at a site in such a narrow window (and these sites look great with the CSS turned off, no matter how small the window). Still, this has always bothered us. It’s these little things that make a layout feel solid or like they could break at any minute. The issue may also arise when sites are view in another application, such as a small pane in an RSS reader.
We discovered a nice little fix for this that only works in some cases and in some browsers, but is harmless elsewhere, so perhaps worth applying. If you add a min-width attribute to the html element, the page will hold open at the specified width, adding a horizontal scroll bar when the windows is made any smaller. This behaviour is pleasantly familiar to those schooled in class table-layouts.
The CSS is simple;
html { min-width: 550px; }
This technique is not effective when absolute positioning is used for the layout. We were surprised to see that an element with an absolute position to the left (position: absolute; left: 10px;, for example) is rendered against the left edge of the window rather the left edge of the page when the page is smaller than the window. It does work nicely when floats are used for the layout. [see comment for update]
The technique also only works in browsers that support the min-width attribute, including gecko-based browsers (Mozilla/Firebird/Camino, etc.) and Safari (and presumably any other KHTML-based browser). Notably absent from the list of browsers supporting the min-width attribute is Internet Explorer (any version, including 6). This is unfortunate, as the attribute is critical to some layout types. Fortunately, IE and the other browsers that do not support the min-width attribute are at least graceful enough to ignore the attribute complete, rather than having a bungled implementation.
Comments
Steven Garrity - July 23, 2003 11:24 am
I originally thought that this didn't work with absolute positioning — putting elements positioned to the right against the window edge rather than the page edge. I was totally wrong. I even filed a bug in Mozilla's bugzilla, where I was appropriately shot down.
The problem was that I was putting the <span class="code">min-width</span> on the <span class="code">body</span> element, when it should really be on the <span class="code">html</span> element.
I've updated the post above accordingly.
Aaron Schaap - July 23, 2003 12:23 pm
It's sad that IE doesn't understand this feature, but nice that many others do.
Does know of a hack / alternative way that could get this desired affect in IE?
Jaykul - November 15, 2003 2:30 am
There's a very simple hack. Make a standard 'spacer' graphic, 1 pixel by 1 pixel, transparent gif. Then, place it on your web page, inside the divs you want to force to a specific size, something like this:
img src="spacer.gif" width="300" height="1"
Actually, you can use height="0", but it breaks in netscape 4.x if you do that (kind-of strange)
Nathan Hall - November 21, 2003 12:49 pm
I haven't tested this yet but could you add the image spacer graphic in a CSS rule, say as a background property? it would be nice to add the graphic as a CSS rule so screen readers are not contronted with images used for formatting purposes.
If this cannot be achieved I think it would be good to add an alt tag to the spacer image.
Brad Bulger - December 27, 2003 1:35 am
I've just been trying to make this work, and an image inside a div does not seem to do anything to force the div to be a certain minimum width - so that if you made your browser narrower than 300 pixels, for instance, the div and its contents would stretch past the right edge of the browser. The div always seems to only be as wide as the browser window.
This is without having specified any other properties for the div, I should add, and in Mozilla on OS X.
Adriano Castro - February 24, 2004 12:10 pm
I've tried all 'tricks' suggested here and none seem to work for my design. IE doesn't seem to like it being forced to a minimum width. Anyone?
AD
Adriano Castro - March 1, 2004 5:38 am
The answer to all our IE prayers comes directly from Svend's site. Check it out... It worked perfectly for me:
http://www.svendtofte.com/code/max_width_in_ie/
AD
Mihkel - March 1, 2004 8:50 am
I use div positioned absolute (75% width) and a simple table (100% width)inside it and again a div (300px width) inside that table. So it is almost as min-width but still not free of "design" tables. So it is no solution, but little more optimzed than with spacer.gif which would need a html request to download and has to rendered as a picture.
Mihkel - March 1, 2004 8:51 am
<div class="main">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><div class="spacer"></div>
Content content content
</td>
</tr>
</div>
Svend - March 1, 2004 10:32 am
The max/min-width/height hack does work. But I wouldn't recommend it, unless you have some DOM/JavaScript experience. It's a particularly nasty hack, with some faults (which can be remedied, though I don't go into that in the linked to site).
Just be careful, and test it carefully, before using it :)
bzend - April 4, 2004 2:24 pm
"[...]in normal browsers, even the most beautiful flexible-width CSS layouts get wacky when the window gets too narrow."
"[...]when you shrink your browser window too narrow (200~300px), elements start to wrap, and this generally get jumbled[...]"
I see this wrapping aspect of CSS-positioned pages as an advantage over the table layout. IMO, this min-width obsession is just a remnant from the <table> way of thinking. Even if IE supported it, I don't think I would be using it, as I prefer to have a page wrapped than a horizontal scroll bar (is there anything more annoying than a horizontal scroll bar?).
So, if narrow windows are an issue, there are ways to produce a meainingful page layout with CSS even with a narrow window (and without a horiz. scroll bar!). This is not a weak side of CSS, these conditions were simply not taken into consideration when developing the pages given here.
Kev - June 1, 2005 7:50 am
This will work for IE and FireFox
<div style="min-width:180px">
<div style="width:180px">
some long content here that would wrap normally
</div>
</div>
Alan - November 8, 2005 8:00 pm
The tip to set min-width on html instead of body helped me fix a problem with safari.. thanks! However, then in gecko browsers it applied the width but did not show a horizontal scrollbar.. so now I check the user agent and set min-width on html for safari, else body.
Scott - December 17, 2005 3:08 pm
Why not just consider using the minmax.js that Andrew Clover wrote and can be found on doxdesk.com? It seems to do alright for IE6 Win although there are times it doesn't fire properly when the window is being resized. To fix, slightly move the window frame and it will catch up.