Okay so this may be a real easy fix, but i cant figure it out. First post though so I should introduce myself. Im taking an intro to web publishing class in college. Ive got one last site to do and about 3 hours to get it up.
my problem
the text isnt staying within the div I set up. Its driving me mad! I've been trying to figure this out for at least 2 hours now and I need to get this fixed. Any help would be greatly appreciated.

here is the external css im using


#col1 {
background-color:#AFDBD5;
float: left;
width: 20%;
margin-left: 3%;
text-align:left;
}

#col2 {
background-color:#E6EBB9;
float: left;
width: 48%;
margin-left: 3%;
}

#col3
{
background-color:#AFDBD5;
float: left;
width: 20%;
margin-left: 3%;
text-align:left;

}

#footer
{
background-color:#FF6347;
clear: both;
}


p.col1 { margin-left:5px;
margin-right:8px;
text-align:left;
padding-left:8px;
padding-right:8px;

}

body {
background-color:#FFFFFF;
}

p.col3 { margin-left:8px;
margin-right:8px;
text-align:right;
padding-left:0px;
padding-right:8px;
}

This is where i got it from because ive been having trouble learning layout. Max Design

also here is the html file Ive been using it on. The text is there for show.
I rarely

<body>
<div id="header" align="center">Zoula LLC</div>

<div id="col1">

<p class="col1">This is some more text this is some more text this is some more text

</p>


</div>

<div id="col2">a section </div>

<div id="col3">
<p class="col1">hi this is the text the text the text the text

</p>
</div>

<div id="footer">you should try it</div>


</body>



</html>