I want a 3 column layout, I have designed it so far and I have just bumped into a problem. Evertime there is text on the right side (float:right  it makes the main (middle) section go down and start at the bottom of the text.. ?
HTML Code:
body {
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
background-color: #333333;
color: #CCCCCC;
}
#main {
font-family:Arial, Helvetica, sans-serif;
font-size:100%;
background-color: #333333;
color: #CCCCCC;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
width: 60%;
margin-left:auto;
margin-right: auto;
padding:5px;
clear:both;
}
#right {
width:20%;
float:right;
text-align:right;
}
#left {
width:20%;
float: left;
}
#top {
width:100%;
margin-left:auto;
margin-right:auto;
text-align:center;
padding-bottom:5px;
}
#footer {
clear:both;
font-size:90%;
text-align:center;
margin-left:auto;
margin-right:auto;
border: 2px solid #000000;
width:25%;
padding:2px;
}
p {
font-size: 90%;
color: #CCCCCC;
}
h1 {
font-size: 200%;
font-weight: bold;
text-align:center;
line-height: 30%;
color: #00FF00;
}
h2 {
font-size: 150%;
font-weight: bold;
text-align:left;
line-height:30%;
color: #00FF00;
}
h3 {
font-size: 110%;
font-weight: bold;
text-align:left;
line-height:30%;
color:#00FF00;
}
#right h3 {
text-align:right;
}
a {
color: #0099ff;
text-decoration:none;
}
HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Be The Band - Can You Manage It?</title>
<link rel="stylesheet" type="text/css" href="inc/style.css" />
</head>
<body>
<div id="top">
<p>TOP</p>
</div>
<div id="left">
<h3>Login</h3>
</div>
<div id="right">
<h3>Statistics</h3>
<p><strong>Registered Users:</strong> 32847</p>
<p><strong>Users signed up today:</strong> 4737</p>
<p><strong></strong></p>
</div>
<div id="main">
<h1>Be The Band</h1>
<h3>What is Be The Band?</h3>
<p><strong>Be The Band</strong> is a new revolutionary online multiplayer game that can be played by anyone, anywhere. When you join, you are a manager. The idea of being the manager is to hire musicians, train them to make them better and get them better instruments. Eventually you will be able to go against other players to fight for the #1 spot in the leagues.</p>
<p>Throughout <strong>Be The Band</strong> you will be able to interact with other players, hire musicians, buy new instruments and train your musicians. As well as being in charge of the band, you are also in charge of their welfare! Be careful, because if one of the bands musicians doesn't like it; you might find yourself not able to do any gigs!</p>
<h3>What do I need and how do I play?</h3>
<p>In order to play, you must have internet access, at home, at work, wherever. You need to have a passion for games not forgetting a passion for music if you're wanting to be the #1 band in the league tables of <strong>Be The Band</strong>.</p>
<p>You can signup by either using the <a href="#" title="">registration form</a> or an invitation link sent to you by a friend. Also, for a full complete guide to our rules and a game FAQ, just use the help link at the top of the page!</p>
<h3>Screenshots</h3>
</div>
<div id="footer">
Copyright © Be The Band 2007
</div>
</body>
</html>
|
