As stated before in the step 4, there is no limit on how a grid should be built, one key feature that has not yet been discussed here is the possiblility of nesting grids. That is, build a grid inside another one. You might be saying "why would I ever want to build a grid inside another one? I can easily expand the first one to fulfill my needs!"; but the oportunities that grid nesting provides are endless. It can finally support the goal of any designer, let the grid adapt to the content instead of having the content adapt to the grid.

This will be a step by step guide on how to build this complex layout using the techniques previously seen. First start your Notepad or favorite textor HTML editor and start an empty webpage. During this tutorial I will only write the code necessary for the body section of the page, the head is up to you.

Now that you have your web page open and ready for coding we are going to start of by building the basic elements, being these the Header, the Left, Right and Body columns and the footer. We will be using the layer approach, but if you feel so inclined you might get it to work with any other method, your imagination is the only limit. Here's the basic elements' code:

Simple right? But we had already seen this, so there is no surprises. For now let's put aside any CSS formatting since we will get to that when we finish building the layers. For now lets move on to the next step where we will finally see something new.

<Previous Index Next>