Page layout with div tags tutorial

Creating and positioning boxes

In order to divide, organise and position web page content it is necessary to use <div> tags (divisional). This tutorial explains how to hand code a web page and control it's appearance with a linked CSS style sheet.

A web page will typically need the following 4 elements ..

1. Viewport / container box

The sets the overall size of the site. Inside it we placeand position our various <div> boxes, such as ..

2. Masthead

This will be positioned at the top every site page and will typically contain ..

3. Navigation

Containing links to the site's pages

4. Content boxes

Boxes to hold the sites content (images, text, videos etc).

 

 

Let's start this exercise ..

 

1. Open your text editor (TextEdit or NotePad).

 

 

2. Create and save 2 documents ..

 

 

3. Copy the following code to the page-layout-exercise.html document and re-save it.

<html>

<head>
<title>Page layout exercise</title>
<link href="page-layout-exercise-styles.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">

<div id="masthead">
<p>masthead content goes here</p>
</div>

<div id="navigation">
<p>navigation links go here</p>
</div>

<div id="content">

<div id="content-box-1">
<p>content-box-1 content goes here</p>
</div>

<div id="content-box-2">
<p>content-box-2 content goes here</p>
</div>

<div id="content-box-3">
<p>content-box-3 content goes here</p>
</div>

</div> <!--content-box ends here-->

</div> <!--container ends here-->

</body>

</html>

 

 

4. Copy the following code to the page-layout-exercise-styles.css document and re-save it.

body {
font-family: "arial", sans-serif;
background-color: #000;
}

#container {
margin-right: auto;
margin-left: auto;
width: 1000px;
height: 700px;
position: relative;
background-color: #FFF;
}

#masthead {
position: absolute;
z-index: 2;
top: 0px;
left: 0px;
width: 960px;
height: 100px;
background-color: #FFFF66;
padding: 20px;
}

#navigation {
position: absolute;
z-index: 3;
top: 40px;
right: 80px;
width: 400px;
height: 100px;
background-color: #FF6655;
padding: 20px;
}

#content {
position: absolute;
z-index: 2;
top: 160px;
left: 0px;
width: 960px;
height: 440px;
background-color: #66FFFF;
padding: 20px;
}

#content-box-1 {
position: absolute;
z-index: 3;
top: 0px;
left: 0px;
width: 50px;
height: 300px;
background-color: #FFE0B2;
padding: 20px;
}

#content-box-2 {
position: absolute;
z-index: 3;
top: 200px;
left: 140px;
width: 300px;
height: 200px;
background-color: #99FF66;
padding: 20px;
}

#content-box-3 {
position: absolute;
z-index: 3;
bottom: 0px;
right: 10px;
width: 400px;
height: 100px;
background-color: #FFCCFF;
padding: 20px;
}

 

 

5. Launch a browser (eg Safari) and open page-layout-exercise.html in it to view the results.

 

 

6. Change the width of #content from 960px to 760px. Re-save your style sheet and refresh the page in your browser to view the results. What changed?

 

 

7. Edit the CSS styles to change the position, size, and colour of #content-box-1 2 and 3.

 

 

8. Try adding some more content boxes.

 

 

Tutorial files

page-layout-exercise.html

page-layout-exercise-styles.css