Form Fields Can Really Mess With Your Layout

I was at a friend's house the other day, and got an unpleasant shock when I checked this blog on her computer (XP, running Firefox at 1024 x 768 resolution).

One of the challenges of CSS-based design is the problem of floats jumping around when screen fonts are resized. (You can see it happen for yourself on a lot of blogs and web sites — just press the Control key and scroll the mouse wheel toward you. You may see parts of the screen jump around, especially as the type gets larger.)

I had worked hard to eliminate the problem on this blog, testing the three-column layout on a variety of browsers and at various screen resolutions. (It usually occurs when your floated DIVs and their margins, padding, borders, etc. add up to more than the width of the containing DIV.)

Everything seemed to be working fine on my computer, so I was truly perplexed to once again see a missing right-hand column on her machine, configured identically. It had popped down below the middle column, well off the bottom of the screen. (Tip: if you find this happening on other blogs, try scrolling down to locate the missing content.)

Then it dawned on me: one of the most recent changes I made here was the addition of the FeedBlitz subscription form at the top right of the screen. I hadn't even looked at the code I pasted into my template. The input field had a default size of "26" — too wide for the column. Sure enough, reducing it to "20" solved the problem.

So, another lesson learned: remember to re-test at various screen resolutions and in different browsers whenever you make code changes that could affect site layout. Never assume that — just because you have already thoroughly tested a design — you can rest on your laurels!