Kevin W. Tharp

Eagle

The Fluid Grid : Fluid Structure and Content

Everything we have done up to this point has been old school for creating fluid layouts. Now we are going to begin implementing some of the mid-level concepts that give us even greater control of our content.

On this page we have adjusted our thinking from assigning our widths in pixels, to assigning our widths in percentages. This is a fundamental shift in the way that many people think about web design because we have been taught to think in pixels.

In this way we will need to start doing some math. The equation that will be at the heart of much of what we do here is
target ÷ context = result.

For now, lets deal with the "mainbody" and <aside> elements in our page that we floated into a two column format in the previous page. The first thing we need to do is go from pixels to percentages. We need to understand the two variables that lead to our result if this is going to work. The target, is simply the element we are working with at this moment. We will start first with the "mainbody" div. As you recall, we set the width to 566 pixels. The mainbody is the target so we would plug 566 into the target variable: 566 ÷ context = result.

The context is the tricky part, as it is based upon, well... the context of what you are working with at the moment. In our document structure, the "mainbody" div sits within another div called "container" that I use as a wrapper around the design. This "container" then sits within the <body> element. So, from a structural standpoint it would look something like

<body><#container><#mainbody>

So, the context of mainbody is a combination of the influences of both <body> and <#container>. As you can see in the code snippets in the aside on the right that were taken from the 960grid.css stylesheet affecting this page, the body has no width paramaters so no real influence from <body>. However, if you look at the fixed width page, the <#container> specifies a width of 960px. That is the size of page we have been working with so we will continue that here. So the context in this case would be 960. (This gets more complicated when you start working with fluid widths and nested elements.)

So now our equation would be 566 ÷ 960 = 0.5895833333333333 This is the number we need to plug into our CSS to get a box that is the same size when we are viewing the page at 960 px, but will size down as the browser's viewing window decreases.

Now we do the same thing for the <aside> to get 331 ÷ 960 = 0.3447916666666667 and plug all of our values into our 960grid.css file in the appropriate places. This is a good time to get in the habit of using comments if you do not already. It can be very frustrating to later come into your code to try to figure out why you used certain values and even worse so when going into someone elses uncommented code.

To make this work as a fluid grid, we have one more step to take. The equation we were using was to give us the relative sizing in comparison to the context. So, the size of the two columns change based upon the size of the window, as long as the page is a fluid design. If you have a pixel based width in the <body> or <#container> tags, then it is still a fixed width page and this method will not work.

Now we will begin looking at how to deal with images in:

The Fluid Grid: Fluid Images