Hello,
I am building a site with columns and I cannot get them to work right. Here is my html document:

<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

<div id="bodycontent">
<div id="column1">
<p class="columnhead1">Column 1</p>
<p class="columnhead2">Column 2</p>
<p class="columnhead3">Column 3</p>
</div>

</body>

-------------------------------------------------------------
Here is my style sheet:


body {
background-color: #99BADD;
}

#bodycontent {
margin: 10%;
background-color: white;
}

#bodycontent {
padding-top: 3%;
padding-right: 4%;
padding-left: 4%;
font-size: 100%;
}

#bodycontent {
background-color: white;
border: 2px solid white;
border-radius: 10px;
margin-top: 2%;
margin-bottom: 0;
}

.columnhead1 {
width: 32%;
margin-right: 2%;
border-bottom: 2px solid black;
float: left;
}

.columnhead2 {
width: 32%;
margin-right: 2%;
border-bottom: 2px solid black;
float: left;
}

.columnhead3 {
width: 32%;
border-bottom: 2px solid black;
}
--------------------------------------------------------------------
When I add "float: left" to ".columnhead3", It puts all of the columns on the same line but moves them out of the white area. I need to know how to keep the columns on the same line, while keeping them in the white area.

Thanks in Advance,

Alex