Kevin W. Tharp

Eagle

The Fluid Grid - A fluid width page

So we have seen an example of a fixed width page. There are many examples of fixed width pages, and they have been predominanat through the 1990s and 2000s. But now we are moving quickly to a point where you cannot predict the size screen, or the size window the visitors to your site will be using. Enter the fluid grid.

This page has a semantic structure that consists of the following:<div id="container>,<header>, <nav>, <section id="mainbody">, <aside>, and <footer>. And to be completely honest with you, I had to go back in and change the markup to include the new HTML5 markup. In the past I would have used divs for the header, nav and footer, and the aside would have been given class as would the code sections. The one exception to using HTML5 tags I have used in this page is that I continued to use class="code" instead of <code> because the browsers I used to view the results do not do a good job of implementing the code tag at this time.

While that way of creating the structure in the page is not wrong, the new HTML5 tags make for slightly simpler coding, and give a clearer explanation about what type of content will live in each of those areas.

Using that structure, I have set the page to a two column format by floating the "mainbody" to the left and the <aside> to the right. I have also set the width of the container to 90% and given it a 36 pixel border.

<style type="text/css">
#container {
width: 90%;
margin:36px auto;
}
aside {
width: 331px;
float: right;
}
#mainbody {
width: 566px;
float: left;
}
</style>

Notice how when you resize your browser display window, the site resizes, but what about that logo image at the top? It stays the same size and bleeds out of page structure. We need to do something about this problem.

You will also notice that the aside, in which I have placed the resources information on this page, drops down below the "maincontent" when the window narrows to the point where the width of the mainbody (566 px) and the aside (331 px) along with padding and other overhead attributes no longer fit within the view space the browser has available. This is a normal and natural thing because of the float attribute I used to let the two elements display next to each other. When the lower attrubite no longer can fit, it no longer floats and sinks back down to its natural location in the document order.

At this point we have introduced a fluid design, but our content is not fluid. That is the next step.

Step 3 - The Fluid Grid : Fluid Structure and Content