Column Troubles
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
Share: 
Hi
Add a "clear:" property after Column 3.
| Code: |
| <div id="column1">
<p class="columnhead1">Column 1</p> <p class="columnhead2">Column 2</p> <p class="columnhead3">Column 3</p> <br style="clear:left;" /> </div> |
Share:
You're also missing a closing div tag:
</div>
just before the </body> tag.
Share: