Web Page Layout #8
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 #8 uses 4 main divisions. The first single column division is used for our links. The second division is divided into 2 columns and forms our heading. The third division is divided into 3 columns and is used for our body content. The columns are created using nested divisions followed by another single division for the footer.


Layout 8This simple web page, Layout 8 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, layout8.css.

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

The CSS Layout #8

/* remove default padding and margins */
* {
margin: 0 0 0 0;
padding: 0 0 0 0
}

/* set default colors fore and background */
body {
padding: 0 5%;
color: #efefef;
background: #000000;
font-family: arial, verdana, serif;
font-style: normal;
font-weight: normal
}

/* set size of links division */
#links {
width: 100%;
background: #212121;
float: left
}



/* set size of heading division container */
#heading {
width: 100%;
float: left
}

/* set size of heading-left division and position */
#heading-left {
width: 50%;
float: left;

}

/* set size of heading-right division and position */
#heading-right {
width: 50%;
float: right;

}





/* set size of main division */
#main {
width: 100%;
float: left
}


#main-left {
width: 20%;
float: left;
margin: 0 0 0 4%

}


#main-middle {
width: 44%;
float: left;
margin: 0 4% 0 4%
}




#main-right {

width: 20%;
float:right;
margin: 0 4% 0 0

}




#main-middle img{
margin: 5px 5px 5px 5px
}

/*Liquify images */
img {
max-width: 100%
}


#heading-left img{
padding: 5% 0 5% 10%
}


/* set size of footer division and add back color */

#footer {
width: 100%;
background: #212121;
float: left
}


/* set font properties of links */
#links p {
font-size: 12pt;
font-weight: bold;
float: left;
padding: .5% 1%
}

/* set color of links and remove underline */

#links a {
color: #efefef;
text-decoration: none
}

/* set hover or roll over color of links */
#links a:hover {
color: #ffd700;
text-decoration: none
}



/* add font settings for paragraph tag in heading-right division */
#heading-right p {
font-size: 14px;
float: right;
padding: 10% 10% 10% 0
}

/* set font properties of h1 tag within main-middle div */

#main-middle h1 {
font-size: 20px;
text-align: center;
padding: 2% 0
}

/* set font properties of h2 tag within main-middle div */
#main-middle h2 {
font-size: 16px;
text-align: center;
padding: 2% 0
}


/* set font properties of paragraph tag within main-middle div */
#main-middle p {
font-size: 16px;
text-indent: 16px;
text-align: left;
padding: 2% 0
}


#main-right h2, #main-left h2 {
font-size: 16px;
text-align: center;
padding: 2% 0
}

#main-left p, #main-right p {
font-size: 14px;
text-align: center;
padding: 2% 0
}

/* set font properties of address tag within footer div */
#footer address {
font-size: 12px;
text-align: center;
padding: .5% 0
}

Kit and More Information

You can download the web page code , style sheet and images in a zip file for further study.
Download Layout8.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

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