Multicolumn Layouts and Web Grids:

Jorge Blanco
Webmaster

Other articles written by this author

Related Articles

+ Build your own website from scratch
+ Building a template file

Related Links

Little Boxes
W3Schools HTML
W3Schools CSS

Multicolumn Layouts and Web Grids.
By Jorge Blanco

6. The layer approach.

When talking about layouts and designs, layers are probably the most common subject. They have become the milestone for many techniques. What is the reason? They are flexible content holders that can behave in many different ways; you only need to tell them how. Layers on their own are nothing more than an empty box, but their possibilities to work with CSS, JavaScript and even Server Side Scripting make them a very valuable asset for the web publisher.

This method has a very simple syntax and requires knowledge on CSS for proper usage. The basic idea is to use some nesting layers much like the tables, some layers will work as 'row' holders and others will be the 'cells'. For sake of simplicity I'm separating the HTML code from the CSS.

Now the CSS:

#header, #body, #footer{
width: 100%;
clear: both;
}

#logo{
width: 20%;
float:left;
}

#header{
width: 80%;
float:left;
}

#left_bar{
width: 20%;
float:left;
}

#content{
width: 60%;
float:left;
}

#right_bar{
width: 20%;
float: right;
}

Now let's explain, first the HTML. As you can see, there is no limit in the number of elements to use or in the nesting depth. First we create the three row holders, header, body and footer. Then, inside each one, we create the real content holders; for the head we need two, one for the logo and the other for the headline. For the body we have three, one for the left column, another for the content and the last one for the right column. Finally, for the footer we just need one, hence we use the original content holder.

For the CSS there is not much to explain, all the measures are put as percentages because this is a fluid layout, but if you need to, you can substitute them for real measures in order to restrict the size of the layout, this is important when you have image backgrounds or your layout is made out of images. The main content holders are set to clear: both; because that way there is no way one might get in the same level as the other, meaning that there is no way that the body will come to the right of the header, it will always be below the header. The float property is set for the real content holders in order to allow them to be in the same level as the others (the opposite of the clear property purpose); meaning that the content column will be rendered to the right of the left column and it will be aligned to the left.

Now, let's build a grid similar to the previous table one. We will use the same design that was used above and the same CSS, therefore, only the modified HTML code will be put here.

And that's it. Simple enough, don't you agree? The thing about the layer approach is that it is just more much flexible than the table approach, the possibilities are endless. And with just a tweak in the CSS the layout can be totally changed without ever touching the data code. When we get to complex layouts you will see how much flexibility we really need and why the layers are the preferred method. But before we even get there, there is one more method to see.

<Previous Index Next>