Help - Newish at This & Needing 3rd Column

[GhostOfKrynn]

Hello everyone, the name's Ghost and I'm fairly new at this whole thing. I'm pretty good at HTML, but I've learned all my CSS from studying others CSS and I'm at a standstill. I thought I knew how to make a 3rd column, but I don't and now I'm frustrated because I know it's something I'm over looking. -_- I want a 3rd column on the other side of the main part of the site. And I haven't been too hot at it so far. Screenshot of what it looks like so far. (http://i285.photobucket.com/albums/ll49/DasGhost/screenshot.gif)

CSS::

/* Page Elements */
body {
background-image: url('images/piink.jpg');
margin-top: 0px;
margin-bottom: 0px
}
body, td, th {
color: #000000;
font-family: verdana;
font-size: x-small;
font-weight: italic;
}
a:link {
color: #FF2084;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FF2084;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #00adef;
}
a:hover {
text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #ec008c;
color: #9C0B19;
}
a:active {
text-decoration: none;
color: #FF2084;
}

/* Layout Structure */
.main {
background-image: url('images/horiz.png');
background-repeat: repeat-y;
width: 1045px;
margin-right: auto;
margin-left: auto;
}
.mayne {
width: 1012px;
margin-right: auto;
margin-left: auto;
}
.topp {
height: 204px;
width: 1018px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: -3px;
}
.bodztitl {
background-image: url('images/bluu.gif');
background-repeat: repeat;
width: 560px;
border: 1px solid #FF3E94;
margin-right: auto;
margin-left: auto;
text-align: center;
padding-top: 10px;
font-size: large;
font-family: verdana;
letter-spacing: -1px;
padding-bottom: 10px
}
.footer {
font-family: Verdana;
font-size: x-small;
font-weight: bold;
color: #FFB5D6;
background-color: #FF529F;
text-align: center;
width: 1045px;
margin-right: 1px;
margin-left: -17px;
padding-top: 15px;
padding-bottom: 15px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #000000;
}


.bclowd {
background-image: url('images/bcloud.gif');
background-repeat: no-repeat;
float: left;
height: 204px;
width: 270px
}
.tpstar {
background-image: url('images/banstars.gif');
background-repeat: no-repeat;
float: right;
height: 216px;
width: 748px
}
.bodd {
width: 800px;
margin-right: auto;
}
.mbod {
float: right;
width: 580px;
margin-right: auto;
}
.banner {
height: 100px;
width: 645px;
margin-top: 5px;
}
.cldbrd {
margin-bottom: 10px;
}
.bodz {
background-color: #FFE0EE;
width: 540px;
margin-right: auto;
margin-left: auto;
border: 1px solid #FF79B5;
padding: 10px;
text-align: justify;
background-image: url('images/s-stars.gif');
background-repeat: repeat
}
.bodz h1 {
font-size: small;
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #00adef;
letter-spacing: 2px;
text-indent: 15px;
}
.bodz h2 {
font-size: small;
letter-spacing: 2px;
text-indent: 15px;
}
.bodz u {
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #00adef;
text-decoration: none;
}
#blockq {
padding: 10px;
background-image: url('images/bluu.gif');
background-repeat: repeat;
margin-left: 15px;
border: 1px solid #FF3E94
}

/* Side Panel */
.sbi {
float: left;
width: 220px;
}

.sbititle {
background-image: url('images/sbihead.gif');
background-repeat: no-repeat;
height: 50px;
width: 213px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
padding-top: 25px;
font-family: Verdana
font-size: small;
text-indent: 50px;
letter-spacing: -0.5px
}

.sbibod {
padding: 10px;
width: 180px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
font-family: Verdana;
font-size: x-small;
font-weight: bold;
background-color: #FFE0EE;
border: 1px solid #FF79B5;
text-align: justify;
background-image: url('images/s-stars.gif');
background-repeat: repeat
}
.sbi p {
padding: 10px;
width: 180px;
display: block;
margin-right: auto;
margin-left: auto;
margin-top: -20px;
border: 1px solid #FF79B5;
background-image: url('images/s-stars.gif');
background-repeat: repeat;
text-align: left
}
#sbinav {
width: 200px;
margin-right: auto;
margin-bottom: 10px;
margin-top: -20px;
margin-left: auto;
font-family: Verdana;
font-size: x-small;
font-weight: bold;
background-color: #FFE0EE;
border-top: 1px solid #FFCCE2;
border-right: 1px solid #FFCCE2;
border-left: 1px solid #FFCCE2;
}
#sbinav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#sbinav ul a {
background-color: #FFF1C6;
display: block;
color: #FF79B5;
text-decoration: none;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFCCE2;
}
#sbinav ul a:hover {
background-color: #FF79B5;
background-image: url('images/star.gif');
background-repeat: no-repeat;
background-position: 7px center;
color: #FFF1C6;
padding-left: 30px
}



HTML::

<!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>Stuff</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="main">
<div class="mayne">
<img src="images/spacer.gif" width="800" height="10" />
<div class="topp">
<div class="bclowd"></div>
<div class="tpstar">
<div class="banner">
</div>
</div>
</div>
<div class="bodd">
<div class="sbi">
<div class="sbititle">"Ghost is a Metroid."</div>
<p><a href="http://ofdiceanddemons.300mb.info/"><img src="images/cclog.gif" width="100" height="100" border=0></a><br>Call Me: Ghost.<br>
Or Sometimes: Bill Pardy & Rune.<br>
I'm: 22.<br>
Sex: Female or Yes.<br>
Status: Married and a lush.<br>
I kiss: Boys & Girls.<br>
Zodiac: Ox & Fish
</p>
<div class="sbititle">"Oh, the places you'll go!"</div>
<div id="sbinav">
<ul>
<li><a href="http://ofdiceanddemons.300mb.info/site.html">About the Site</a></li>
<li><a href="http://ofdiceanddemons.300mb.info/ghost.html">About Ghost</a></li>
<li><a href="http://ofdiceanddemons.300mb.info/raz.html">About Raz</a></li>
<li><a href="http://ofdiceanddemons.300mb.info/friends.html">My Rad Friends</a></li>
<li><a href="http://ofdiceanddemons.300mb.info/orion.html">The ORION Project</a></li>
<li><a href="http://ofdiceanddemons.300mb.info/pixels.html">My Pixels</a></li>
<li><a href="http://ofdiceanddemons.300mb.info/words.html">My Words</a></li>
<li><a href="http://ofdiceanddemons.300mb.info/ocs.html">My OCs and RPs</a></li>
<li><a href="http://ofdiceanddemons.300mb.info/dnd.html">Dungeons & Dragons</a></li>
<li><a href="http://ofdiceanddemons.300mb.info/misc.html">Misc. Stuff</a></li>
<li><a href="http://ofdiceanddemons.300mb.info/razart.html">Commisions by Raz</a></li>
<li><a href="http://ofdiceanddemons.300mb.info/stalk.html">Stalk Me</a></li>
<li><a href="http://ofdiceanddemons.300mb.info/links.html">Links</a></li>
<li><a href="http://ofdiceanddemons.300mb.info/faq.html">F.A.Q.</a></li>
</ul>
</div>
</div>
<div class="mbod">
<div align="center" class="cldbrd"><img src="images/cloudsbdr.gif" width="529" height="32" /></div>
<div class="bodztitl">"You know how I do." - Ghost </div>
<div class="bodz">
<h1>Whaddupdoe?</h1>
<p>Coming soon.</p><br><br>

<h1>Updates</h1>
<p>Coming soon.</p><br>

<p id="blockq">This is here because it is pretty. :-P Lol.
</p>
</div>
</div>
<img src="images/spacer.gif" width="800" height="15" /> </div>
<div class="footer">Copyright &copy; 2007 - Destiny & Gabriel Elkins. All Rights Reserved. </div>
</div>
</div>
</body>
</html>


Thanks in advance to anyone who can help me. ^_^

[effpeetee]

If you look here, (http://www.exitfegs.co.uk/Sources.html) you will find many sourses of help.

This is one of many. (http://blog.html.it/layoutgala/)

Frank

[GhostOfKrynn]

Thank you so much!! I'd been looking for a good site to look on for a few hours now, and suddenly one of them there clicked.

I think I've got it now. I don't actually know where I was wrong, it seemed I was doing everything right. But, perhaps it was the margins I was using. Thank you so much again for all your help it is very much appreciated. ^_^

[effpeetee]

No problem.
Welcome aboard.:thumbsup:

Frank