Web Page Layout #6
Tutorial on How to Design a Web Page

We have developed a simple way for beginners to design their own web page template using division tags and CSS (style sheets).

Layout #1Layout #6 uses 4 main divisions. The first division is divided into 2 columns to make our heading. The second is a single column division and is used for our links. The third division is divided into 2 columns and forms our body content. The columns are created using nested divisions. The fourth is a single column division and is used for our footer.


Layout 6This simple web page, Layout 6 was created using this set up.

The basic HTML code without content is shown on the right.

Alignment of columns, color and font properties are all set using the style sheet, layout6.css.

<html>
<head>
<link rel="stylesheet" href="layout6.css" type="text/css">
</head>
<body>
<div id="heading">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="links">
<div id="main">
<div id="main-left"></div>
<div id="main-right"></div>
</div>
<div id="footer"></div>
</body>
</html>

Kit and More Information

You can download the web page code , style sheet and images in a zip file for further study.
Download Layout6.zip

Use these lessons in our HTML tutorial to get a better understanding of building web pages with division tags and CSS.
The Division Tag
The ID Attribute
3 Columns without tables

These web page examples are designed without any margins, padding or borders added to the nested divisions. Read why here: Visual Diagrams

More Web Page Resources

You can get a logo for your web page made free at our Web Graphics Gallery.

Get your navigational buttons at our Button Gallery or go to Creating Buttons With CSS