Left Column navigation...

    Simple Layout

3 column fixed layout

Faux Column layout

You is a link for a "generator" called "Markup Maker" that makes a nested "id" layout for your web page. Nice!

It is by the author of Build Your Web Site the Right Way, Ian Lloyd

Markup Maker

This is content

The HTML

<div id="container">
<div id="banner">
<p>This is the banner </p>
<p>&nbsp;</p>
</div>

<div id="leftcolumn">
<p>Left Column navigation...</p>
&nbsp;&nbsp;&nbsp;

<a href="simple.html">Simple Layout </a><br /><br />
<a href="3col-centered.html">3 column fixed layout </a><br /><br />
<a href="index.html">Faux Column layout </a>
<p>&nbsp; </p>
</div>

<div id="content">This is content
</div>

<div id="footer">Footer
</div>

</div>

This is the CSS

#container {
border:ridge red 4px;
margin: auto;
width: 900px;
height: 700px;
text-align: left;
background-color: #ffffcc;
}

#banner {
border: inset #3333ff 2px;
width: 897px;
height: 110px;
background-color: #9FC;
}
#leftcolumn {
border: inset white 2px;
clear: left;
float: left;
width: 150px;
height: 500px;
background-color: #9F6;
}
#content {
border: inset #00ff00 2px;
float: left;
width: 730px;
height: 500px;
position: relative;
left: 10px;
background-color: #DDDDF7;
}
#footer {
clear: left;
width: 890px;
border: double blue 4px;
height: 50px;
background-color: #F9F;
}