Aaron's Driving School

Following on from our last instalment, let’s have a look at how a simple layout can be so much more effective and aesthetic than many more complicated ideas.

So, continuing with the idea of clarity being key, try not to work with too many items of content. Modern web design typically separates different items of content with <div> tags, so you’ll have, for example, <div id=”header”>This is the header</div> for the header section. The id is important because we then use the CSS to format it into a readable, aesthetic layout. If you don’t understand too much HTML, read the basics and then come back to the explanation here, because none of this is too difficult so don’t worry!

Last time we talked about a simple yet super-effective layout of header, three content blocks, then footer. You don’t have to follow this at all to have a good layout, but its ubiquity in many web designs says a lot for its effectiveness. Here is a stripped down example:

It’s nothing too special or particularly good to look at, but it’s clear where everything is and the important stuff is easily readable.
As said above, this is all done with the <div> block, which essentially creates a virtual ‘block’ that you define entirely with the stylesheet! For the header, it doesn’t really matter what we do (maybe set margin:0px to remove the automatic buffering around the edges). The important things are the content blocks.

In this example we have three; a left sidebar, a main content area, and a right sidebar. The important thing here is to set the float attribute in CSS. So, if we set up the main areas as <div id=”leftside”></div>, <div id=”main”></div> and <div id=”rightside”></div>, we do the following in CSS:

#leftside {
float: left;
}

#main {
float: left;
}

#rightside {
float:right;
}

This means that the elements will all ‘float’ next to each other. To make it look good and effective, you should specify widths; unless you’re working with images, it’s generally best to use percentages. Make the sidebars about 15% each and then you have between 60 and 70% to set as the main, depending on the borders.

Then you’ll have a basic layout you can start adding content to! The real trick here comes in the footer, however. If you just set up a <div id=”footer”>This is a footer</div>, it will try to follow on after the last float and cut up your webpage. This can be fixed easily in the CSS when we use the clear attribute:

#footer {
clear:both;
}

This means that the footer will follow on after all the content, and we are left with a nice layout in the sense of the example!

There are of course plenty of variants you can employ (such as two columns), but this broadly speaking an effective, simple way to display content in an aesthetic way – and it’s a lot simpler than most might imagine!