In this article I will share with you a technique for laying out stretchy websites (actually, I have found out that I cannot make non-stretchy ones), which I’ve been using for the last 2-3 years. This technique, which can be used for creating sophisticated modular grids, is easy to use but somewhat difficult to understand, and it does have some drawbacks. Basically, this article might be useful for web designers too, as website layout should be correctly designed before actual coding is done.
For starters, the easy things. Say we need to make a stretchy layout like this one:
At first glance, it looks primitive: An ordinary 3-column grid with each column’s width set at 25 percent. One column is allocated for the menu; and two columns, for the content. Everything is centrally aligned. A typical layout solution in this case may be as follows: include both blocks into a container whose width is set at 75 percent. Of that amount, 33 percent goes for the menu, and 67 percent for the content. Center the wrapper using the margin: 0 auto property, or just shift it to the left. (The first method is preferable as it ensures stable behavior in case of the wrapper’s minimum width being limited.) Here’s how this solution looks:
So far, everything looks nice and easy, doesn’t it? That’s until the moment the web designer decides he wants some more bells and whistles in one of the sections, namely placing a remote block outside the content area:
Moreover, he wants that block’s left edge to be aligned with the menu’s left edge — exactly, pixel to pixel! (Let’s not discuss here things like “Who needs that?” or “Nobody will notice a difference of a couple of pixels”, so please concentrate on our specific task.)
Now let me remind you the main rule of website layout: The content must always be placed in one document stream. I’ve seen more than once how website makers start cranking out new layouts as soon as they encounter multi-column or multi-block content, and how they resort to allocating new information fields in the admin panel, all of which must be filled in to make the webpage look exactly as planned. If it happens that the order of those blocks changes, it’s a reason for adding new webpage layouts and new fields in the admin panel, so the website becomes a pile of garbage even before it is launched!
To avoid such mistakes, please start paying close attention to the modular grid as soon as you are creating the first wireframe. Consider it like laying a foundation on which depends your building’s future, i.e. whether it can survive an earthquake or is prone to collapse after a rain. Make sure that all content is placed within one block — don’t let it scatter across the web page (under the menu, above the footer, following the headline, etc.). If you can do that, then applying styles to the content will be a quick job: just use the same template as a constructor kit, adding various blocks here and there, and creating more styles as needed.
Let’s get back to our task: How should we lay the orange block so that its left edge is aligned with the menu’s left edge? As we have already decided, that block should be part of the content, not of the modular grid, especially since that is a contextual block — anchored to a specific fragment of text, not just dangling somewhere on the left side.
The content width is 67 percent; the menu width, 33 percent. For the block’s accurate alignment, we need to shift it by 49.25 percent (33 / 67 * 100 ≈ 49.25). Actually, it’s not that simple: First, we’ve got only an approximate value. Secondly, all web browsers (except Firefox 3) handle fractional percentages (and fractions per se) in peculiar ways, and some browsers totally ignore them. Therefore, it looks like we haven’t found a cross-browser solution for aligning those blocks while keeping our original layout.
Hopefully, you’ve already guessed that to solve the problem we have to use a different method of modular grid layout, which lets us do such tricks (and some more). Take a look at this layout:
If you’re attentive enough, you’ve noticed that the menu width is exactly a half of the content width (50 / 25 = 2). The integer division means we have no fractions, so this is a cross-browser and — most importantly — accurate solution.
Let’s do the following: Wrap both blocks into a container whose width this time is not 75 percent (as before) but 50 percent (i.e. equals the content width). The content width is 100 percent; the menu width is 50 percent, and the menu is shifted to the left by this width.
This example may be coded as follows:
Such a layout lets us easily solve the problem with the remote block: just set its width at 50 percent and shift it to the left by the same amount. Besides, we can use this layout for making very cool alignment of the text in the three main columns:
The simple example that you’ve just seen is intended to draw your attention to two key aspects of such layout technique: setting the base column size and setting the container size (base point). Let’s take a closer look at those things.
To see the opportunities of using our technique, let’s make a 6-column layout:
The catch is that 100 doesn’t contain 6 (100 / 6 ≈ 16.66666), while our web designer still wants to align the content blocks with the main columns.
One way to solve the problem is as follows: If we set the container width at twice the column width, then the inner block width is 50 percent, i.e. exactly the main column width. By setting the margin-right:-50% property for the block, we eliminate its effect on the document stream across the webpage, meaning that we can create as many blocks within the container as we want, and each of them will have impact on the container’s height only, but not on its width.
This layout provides for the uniform distribution of columns, so that we can put all content into one block and exactly position remote blocks inside it.
If we open the web page shown in the last example in various web browsers and try resizing the browser window, in all browsers but Firefox 3 we’ll see one-pixel gaps between some blocks:
Those gaps are caused by web browsers’ calculating the sizes set as percentages in peculiar ways. If you want to set an exact position and size for each block (e.g. if the blocks have distinct borders), you need to understand the cause of the gaps and how you can get rid of them.
Percentage is a relative amount, which needs to be converted into an absolute amount, pixels. (Actually, pixels are a relative amount too, which depends on the screen’s DPI, among other things.) Therefore, if a block’s size is set as percentage, the web browser must convert it into the size in pixels in relation to the container of that block. Say, if the container width is 60 pixels and the inner block width is 50 percent, then the block width in pixels is calculated as follows: 60 * 0.5 = 30px. As you can see, we got integer pixels. See what happens if the container width is 61 pixels: 61 * 0.5 = 30.5px, but the browser cannot draw half a pixel, so it has to round the value ether up or down.
Actually, the real calculations are much more complicated: For example, 4 consecutive blocks, each 25 percent in width, must take 100 percent of the container width in the web browser; some blocks may be wide, some narrow. So please keep in mind that we are considering a simplified case.
Let’s assume that if the calculated block width is 30.5px, the browser rounds it down to 30px. What happens if we include another block, 200 percent wide, within that block? In principle, its width must be equal to the container width, i.e. 61px. However, that doesn’t happen because the intermediate block is 30px wide, so we get the following width: 30 * 2 = 60px, meaning that we have a 1-pixel difference. Of all latest web browsers, only Firefox 3 produces no difference at all; probably, it stores the actual width value somewhere and uses this value in all calculations.
Please note that the new inner block’s absolute width is always an even number. For example, if the intermediate block’s calculated width is 31px, then the inner block’s width equals 31 * 2 = 62px. (Surely, you know that by definition any even number is divisible by 2.)
Therefore, to solve our problem with gaps in a 6-column layout, we need to add another wrapper, one-column wide, and to set the inner wrapper’s width at 200 percent in order to produce a container with an even absolute width. Check out that we got the right result.
Hopefully, now you understand how this solution works. Don’t worry if you don’t grasp everything at once — it took me a few months to formulate the principles that I’m now trying to explain to you. Let’s revisit the key points:
The most difficult part of this technique is choosing the appropriate column size and “base point” size. I’ll demonstrate the benefits of this method on some examples:
Surely, you’ve got some, and the most important is that my technique doesn’t work with layouts that must stretch to the whole browser window width. That’s because of the rounding of percentages — there is a high risk of some block’s going one pixel outside the window, which would result in the horizontal scroll bar being shown. Another drawback is that the step of changing of block sizes exceeds one pixel. And don’t forget that this technique only works if the web designer thinks carefully before drawing something. Actually, you can create very exotic layouts if you choose a small column width (say, 10 percent).
P.S. Please keep in mind that the technique that I described in this article is not a universal remedy. Like programming patterns used for solving specific software-development problems, my technique is a designing pattern and may be useful for solving some — not all — website-building problems.
This post has been written by the team here at Splashnology.com
Subscribe to our email newsletter for useful tips and freebies.