I have decided to go tableless, it was going great until I tried to put some menu items over a banner.

What im trying to do is get "News | Media | Projects | Supporters | Shop" in the bottom left corner of the banner and "Home | Site Map | Contact Us" in the top right corner.

What I am getting instead is the left spacer and left menu only in Firefox and in IE the left menu and spacer, then under them and to the right the right menu and spacer. Ive spent the past 3 hours trying to figure it out and im about ready to stab myself with my desk lamp.

<div class="banner">

<div class="bannerspacerleft"></div>
<div class="bannercontentmenu">News | Media | Projects | Supporters | Shop</div>

<div class="bannersitemenu">Home | Site Map | Contact Us</div>
<div class="bannerspacerright"></div>

</div>

--------------------------------

div.banner {
width: 799px;
height: 69px;
float:left;
background-image: url(images/banner.gif)
}

div.bannerspacerleft {
width: 50%;
height: 43px;
float:left;
background-color: rgb(0,0,0);
}

div.bannercontentmenu {
width: 50%;
height: 26px;
float:left;
padding-left: 20px;
font: 11pt arial;
}

div.bannersitemenu {
width: 50%;
height: 26px;
float: right;
padding-left: 20px;
font: 11pt arial;
}

div.bannerspacerright {
width: 50%;
height: 43px;
float:right;
background-color: rgb(0,0,0);
}



Any and all help is appreciated.