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>

The CSS Layout #6

/* Remove all default padding and margins */

* {
margin: 0 0 0 0;
padding: 0 0 0 0
}

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

/* set width of container for site heading and slogan */

#heading {
width: 100%;
background: #006500;
float: left
}

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



/* position right division and define width  */

#right {
float: left;
width: 40%;
float: left;
}



/* set size for links division */

#links {
width: 100%;
float: left;

}




/* set width  of container for body section */

#main {
width: 100%;
background: #ffffff;
float: left
}

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

}

#main-right {
float: left;
width: 26%;
margin: 1% 4% 0 0

}

/* set width of  footer division - add color */
#footer {
width: 100%;
background: #006500;
float: left
}


/* set font properties for h1 tag in left division */
#left h1{
font-size: 24px;
float: left;
color: #efefef;
padding: 5% 0 5% 10%
}

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

/* define font properties for paragraph slogan within the right division */

#right p{
font-size: 14px;
text-align: center;
color: #efefef;
padding: 10% 0 10% 0
}

/* links are set in a paragraph to allow postioning of right left or center */
#links p {
font-size: 14px;
font-weight: bold;
float: left;
padding: .5%  1%
}

/* set color for links and remove underline (text-decoration) */
#links a {
color: #efefef;
text-decoration: none
}

/* set hover or roll over color of links */
#links a:hover {
color: #00cc00;
}

/* set font properties for h1 tag in main-left division */
#main-left h1{
font-size:20px;
text-align: center;
color: #006600;
padding: 2% 0 2% 0
}

/* set font properties for h2 tag in main-left division */
#main-left h2{
font-size: 18px;
text-align: center;
color: #006600;
padding: 2% 0
}



/* define font properties of paragraph tag in main-left division */
#main-left p {
font-size: 16px;
text-align: left;
text-indent: 16px;
padding: 2% 0
}



/* define font properties of paragraph tag in main-right division */
#main-right p {
font-size: 16px;
text-align: center;
margin: 2% 0 
}


#main-right img {
margin: 0 0;
padding: 0 0;
border: solid #003300 1px;
}


/* set font properties of address tag within footer */
address {
font-size: 12px;
font-weight: bold;
text-align: center;
color: #efefef;
background-color: transparent;
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 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

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