Please read Chapter Six about Divisions

Web Page Design and Layout

 

We want to control the precise placement of texts and images in a webpage. The usual webpage size is 600 pixels wide and 400-500 pixels high. There are three techniques for page layout using divisions, tables or frames.

The first technique for layout is to use the tags <div> to specify the absolute location of text in a page. 
<head>
<style type="text/css">
div.title
{position:absolute;
 left:0;
 top:0;
 bottom:60;
 width:600;
 text-align:center;
 font-size:24pt}
div.col1
 {position:absolute;
  left:0;
  top:290;
  bottom:500;
  width:200}
div.col2
 {position:absolute;
  left:200;
  top:290;
  bottom:500;
  width:200}
</style>
<body>
<div class="title">
Technology Today
</div>

<div class="col1">
This is text for the first column
</div>

<div class="col2">
This is text for the second column
</div>
</body>
The second technique for layout is to use tables 
<body>
<table width="600" border="0">
<tr>
<td colspan="2" align="center" height="60">
This text will be in the top row
</td>
</tr>
<tr>
<td width="300" height="440">
This text will appear in the bottom left cell
</td>
<td width="300" height="440">
This text will appear in the bottom right cell
</td>
</tr>
</table>
</body>
Tables can be nested to produce very complex layouts.