Div alignment issues

[blackriderrom]

A warning, beforehand: I am a complete amateur; my mistakes are likely bad enough to make any experienced coder cringe.

I've spent the whole evening trying to figure out how to fix this, but I've been unable to come up with a decent solution.
Here's the problem:
I have a main content table, suggestively titled "main-content"
I have a horizontal bar at the beginning of it, defined as a div,
which has two sub-spans (mctop with mctop-left and mctop-right) with their respective floats.
After that, what I should have is a left column (a div with an upper and lower section also defined as divs) and a right column (div), with respective floats.
So far, I have found implementing this to be impossible;

I tried floating the left column, but that just lines it up with the first image I have on the horizontal mctop bar, rather than the edge of the intended text area. Floating the right column also doesn't get it all the way to the right.

Searching the internet, I've found that I might have to use some clears, but I'm not exactly sure where they should go; I tried in various places and they had no (positive) effect.

Also, my copyright isn't showing up properly on this page, though it is on another (which only has one content box rather than three).

Without further ado, here's all the related code, and a visual example of the problem:
The page-code:

<div id="main-content">
<div id="mctop">
	<span id="mctopleft">
    <img src="http://forum.codecall.net/images/indexreflect.gif" alt="Index" width="101" height="28" border="0">
    </span>
        <span id="mctopright">
    <?php if (isset($_SESSION['username']))
				{ echo ('User: <a href="#">'.$_SESSION['username'].'</a> <font color="#8B8B8B">|</font> <a href="logout.php">Iesire</a> <font color="#8B8B8B">|</font> <a href="#">0</a> mesaje noi');
				} else { ?>
				<a href="javascript:login('show');">Login</a><font color="#8B8B8B"> | <u>Iesire</u> |</font> <a href="registerpage.php">Inregistrare</a> <?php }
				?>
    </span>
  </div>
<div id="allcontent">
<div id="allcontent-left">
<div id="allcontent-left-top">
<br>
<br />
Esti doar la un pas de a deveni membru TheRefuge!
Dupa ce te inregistrezi, vei putea sa iti configurezi contul propriu, sa<br />
postezi in forum, sa plusezi piesele artistilor de pe site sau, daca
esti tu insuti artist, sa iti uploadezi muzica pe site si sa <br />
vezi *** e primita de ascultatori. <br /><br />

<br />Oricine ai fi, bine ai venit!
</div>
<div id="allcontent-left-bot">
Bottom text goes unde first col!
</div>
</div>

<div id="allcontent-right">
This text should be right
</div>
</div>
	<div id="copyright">
	&copy;2009 TheRefuge. Toate drepturile rezervate.
	</div>
</div>
</div>

The CSS:

div#main-content {
	padding: 0px 0px 0px 0px;
	height:500px;
	margin: 0 auto;
	color: white;
	width:800px;
	background: #000000;
	border: 1px solid gray;

			div#main-content div#copyright {
				float:right;
				font-size:75%;
				height:10px;
				padding-bottom: 5px;
				padding-right: 15px;
                position:absolute;
                bottom:0;
                right:0;
                width:200px; 
				}

div#main-content div#mctop {
	height: 30px;
}
div#main-content div#mctop span#mctopleft {width:200 px; margin-top: 25px; margin-left: 50px; float:left;}

div#main-content div#mctop span#mctopright {width:150 px; margin-top: 25px; margin-right: 35px; float:right;}

div#main-content div#allcontent {padding-left: 50px; padding-right: 50px;}

div#main-content div#allcontent div#allcontent-left{border: 1px solid color:#FFF; float:left; height: 400px; width:300px; padding-left: 0px; padding-right: 10px;}

div#main-content div#allcontent div#allcontent-left-top{height: 200px; width:300px; padding-left: 0px; padding-right: 10px;}

div#main-content div#allcontent div#allcontent-left-bot{height: 150px; width:300px; padding-left: 0px; padding-right: 10px;}

div#main-content div#allcontent div#allcontent-right{border: 1px solid color:#FFF; hegight:400px; width:200px; float:right; padding-left: 10px; padding-right: 10px;}

One last problem is that there's a slight space variation between the nav menu and the page between this one and the one that's properly working.

Here are pics that illustrate the problem in action:
Proper page:
Imageshack - prob2
Problem:
Imageshack - prob1c

I'm really stuck on this one. Any help is (immensely) appreciated.

EDIT: Figured out the solution. Was a simple as setting a class that clears floats and using it with a break after the spans on the horizontal bar.

[DarkLordoftheMonkeys]

I find using only CSS for positioning to be a real pain. My advice is to use both HTML and CSS. If you want to get a block element in a certain position, put it in a div inside a table, or better yet, a div inside a table inside a div. I also use both the CSS float:center property and the HTML <center> tag to center elements, because I never know whether a browser isn't going to render one of them incorrectly. Many people frown upon using HTML for layout, but I don't have the patience to use only CSS. Do what works best for you. I'm just telling you what works for me, so more experienced web developers, please don't kill me.