I can weave the fabric of code!!

Hello, I am ______ ____ and I am here to teach more layout. I now use adobe dreamweaver to punch in my code. So last time I did this:





     I have a weird feeling...  BABOOM!

Hi I'm a header

Hi I can be your table of contents side bar!

I'm the main page Want to know how I did this? Well I'll tell you how. It is by FLOATING! Floating is a very useful tool to put things in the right order. It can make your website look very pretty.

I tell you useful information

This time we're going to do this or something like it(when I said we I mean all of us, I don't want to do it alone):

Logo

• Home
• Products
• Services
• About
• Contact

Feature

Column One

Column Two

Column Three

© Copyright 2013

Well here is the code:






<div class="container_12 clearfix">
<div class="grid_12" id="top">
<h1>
Logo</h1>
<div id="nav">
<ul>
<li><a href="http://www.blogger.com/tom.staynalive.com">Home</a></li>
<li><a href="http://www.blogger.com/tom.staynalive.com">Products</a></li>
<li><a href="http://www.blogger.com/tom.staynalive.com">Services</a></li>
<li><a href="http://www.blogger.com/tom.staynalive.com">About</a></li>
<li><a href="http://www.blogger.com/tom.staynalive.com">Contact</a></li>
</ul>
</div>
</div>
<div class="grid_12" id="feature">
Feature</div>

<div class="article grid_4">
Column One</div>
<div class="article grid_4">
Column Two</div>
<div class="article grid_4">
Column Three</div>
<div class="grid_12" id="bottom">
© Copyright 2013</div>

<style href="css/960_12_col.css" type="text/css">

#nav, #feature, .article, #bottom {
background-color: #efefef;
margin-top: 20px;
padding: 10px 0px 5px 0px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;}

#feature, .article {
height: 100px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;}

li {
display: inline;
padding: 5px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;}

#top {
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;}

</style>