Derek Bender — design, art direction and illustration

Fixing the Browser Resize Render Problem

You're site is done and launched. You've fixed every bug but you overlooked one — when you resize the browser and scroll right, the background images fail to render across the entire width like they should. This most likely won't affect a lot of users but for the people who like to surf the web with small browser windows or who have small screen resolutions (800×600), it's a big problem.

Recently I've encountered a problem with how browsers render elements when the window is resized. Depending on the site's design, this can be a very noticeable flaw to an otherwise good site. And the problem just isn't with IE this time (shocker). The problem exists in all browsers. It surprises me that a few big name site's haven't fixed — or maybe they don't know — that the problem exists (37signals.com).

The Problem: When a browser window is resized to less than the content's width, the background of any element that's width is supposed to be 100% (set either by width: 100% or width: auto) will fail to render across the entire width. The problem looks like this:

The Solution: Put a min-width on your body tag.

1. body {
2. min-width: 1000px;
3. }

Make sure to adjust the min-width to be a little larger than your content area so you'll have a nice space between the content and the edge when the window resizes. Once that is added, try resizing the browser window and you'll see the problem is fixed.