If you’re like me, you like to have a fair amount of control in the way your websites look to the user. As you know, this is not always easy based on the way browers were meant to behave. Browsers were meant to allow differently-sized monitors and windows show the same content, and thus allow for a lot of proportional widths, with the page stretching and scaling to adjust to the different readers. But in these modern days, we can anticipate certain screen resolutions and many pages conform to a rigid width.
Keeping this width is actually quite important from design, usability and branding perspectives, as a matter of fact: my keeping pages a consistent width, we increase the chances that people recognize our pages as something unique (branding), we allow our users to be accustomed to the locations of key navigational components (usability) and we decrease the chances that something unexpected on the page will break the overall design (design).
However, there are very real problems with fixed-width pages that many novices encounter, making fixed width pages a real bear to deal with. I thought I’d take the time to discuss the reasons that – even in a fixed-width page – using proportional sizes has benefits to the designer.
The biggest problem with fixed widths is that different browsers calculate the size of a given box (a <div> or <span>) in different ways. This is especially true when borders are added to a box: some measure from the inside of the border and some from the outside.
The end result is that a 1000px page with three 333px columns right-floated next to one another may not work with all browsers. Because some browsers will add the borders or calculate the size differently, you might end up with a proper-looking page in FireFox but a page with two columns and another wrapped around below them in IE. What a pain!! In order to compensate for this, you would have to set those widths to, say 330px and end up with a whopping 10px of no-man’s-land at the left edge of your page. That’s no good at all.
So what is the solution? Use a fixed width for your outside dimensions and proportional widths for your internal dimensions. By using proportional dimensions, you allow each browser to determine what pixel width is appropriate to fill up the inside of a 1000px page, and you simply specify that columns A, B, and C are each 33% of the total width. If the outside width of the page is set to the appropriate size of your liking, a simple set of mathematical calculations should get you what your proposed internal widths should be by percentage.
It has also been my observation that when using proportional widths with bordered boxes, the browsers tend to allocate space according to the total width of the box – meaning the outside width, including the border – rather than strictly apportioning space based on their own esoteric formulas. This is at least true with narrow 1 or 2px borders. Your results may vary.
The wrap-up:
So, while I certainly like to have a nice, consistent look and feel to my websites, I have found that the best way to handle internal widths is by using percentage width attributes. In fact, my personal recommendation for a rock-solid web page template is to create non-visible zones into which your main content gets filled. Rather than letting your actual content <div>s determine the size of your key zones on the page, create <div>s that don’t alter the color of the page or any other formatting components beyond two very important components:
- Specify the proportional width of the zone.
- Specify:
overflow:hidden;~ or ~overflow:scroll;to handle those unexpectedly large objects that might fill the space.
In this way, you establish the basic layout of your page in a few very simple directives, without all the other stuff. Then you can add content zones into those layout zones with the confidence of knowing your template will not break down the line.
Hope this helps you fellow designers get the pages you’re looking for. To ask questions, comment away!
