Resolving Bugs

Following Alejandra's bug report, I decided to have a closer look at the positioning of the elements on this site.

IE Bug

The first thing I did was to open the page in Internet Explorer. Of course, doing that, I came across the famous IE Doubled Float-Margin Bug. You'd think this is just a stupid bug they could have solved it in a service pack. But no! Luckily the fix is simple so it was corrected very quickly.

Padding Bug

Then I looked at the page in Firefox again but with a lower resolution than the one I used to tweak the site. And the bug reported by Alejandra appeared immediately.

Wide screen

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Nulla dapibus.

Suspendisse vitae augue.

Narrow screen

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Nulla dapibus.

Suspendisse vitae augue.

Very narrow screen

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Nulla dapibus.

Suspendisse vitae augue.

The structure of the page. The fixed sized padding is shown in red. Note how the central gap reduces faster than the columns until it disappears and the columns cannot be displayed side by side anymore.

The Symptom

To understand the nature of the problem, it is essential to understand the structure of this page. Following the header, you have 2 columns that are implemented by two <div> containers, one floated left, the other floated right. The columns are themselves followed by an inline footer that clears both left and right. The widths of the columns are specified as percentages of the enclosing page so that they resize when you resize the screen. However, padding is specified in pixels and so is fixed. My assumption was that padding was applied inside the container thus not affecting their overall width. In fact, padding is applied outside and therefore augments the total width of the columns by a fixed amount.

The consequence of this design is that when you reduce the width of the screen, the two columns change size accordingly but the padding doesn't. As a result, the white space between the columns reduces much faster than the columns themselves until it disappears completely.

When the screen becomes too narrow, the gap between the columns disappear. The two columns cannot be displayed side by side anymore so the second one is pushed below the first one.

Wide Screen

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Nulla dapibus.

Suspendisse vitae augue.

Narrow screen

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Nulla dapibus.

Suspendisse vitae augue.

Very narrow screen

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Nulla dapibus.

Suspendisse vitae augue.

The modified structure. The central gap now changes proportionally to the screen width's variation thus preserving the overall structure.

The Cure

The way to solve the problem is to remove the padding and only rely on width and margins expressed as percentages to position the columns. Using this method, the columns and the white spaces change size with the screen, in particular the gap between the columns.

Even if the screen becomes very narrow, to the point where the text doesn't fit inside the columns anymore, the structure of the page is kept untouched and displays as it was intended. The other benefit of this approach is it makes the code slightly more simple, which is always a good thing.

Having found the problem, I modified the CSS to only use percentages when placing the main elements of the page. It should now display properly in most browsers, whatever the screen size, while taking advantage of the real estate offered by large screens.

Another solution would have been to use percentages in specifying the padding values as well. This is what I thought until I tried it out. For some reason that I haven't quite fathomed, it doesn't work like I expected so it is safer to avoid padding on the main structural elements and rely on percentage widths and margins to position them in a flexible way.

Conclusion

As a summary, here are a list of simple rules to follow when you want to design a page that resizes with the screen, using <div> containers positioned with CSS:

• Make sure you deal with the IE Doubled Float-Margin Bug.
• Only use percentages to position the main structural elements.
• Avoid padding for the main structural elements, especially fixed size padding.
• Replace padding on structural elements with margins and padding on the inside elements.
• Test your design with a small resolution such as 800x600.

One tool that I found very useful to nail down this problem and really understand what happened is the Firefox Web Developer extensions. It can show you where all your block elements are, resize the window to a well known screen size in one click, highlight everything on the page, disable images, Javascript, cookies, etc. It is definitely a must have for any web designer.

Note: spell checking text that contains Lorem Ipsum blocks is a pain in the neck.