CSS help

[wsg14]

HTML

<div class="header">
<div class="headercontianer">
<div class="userstatus"><img src="images/heya.png" border="0" /></div>
<div class="radiostats">radiostats</div>
<div class="logo"><div class="whatchathink">opinions</div></div>
</div>
</div>

<div class="navigation">
<a href="#"><div class="nav_link"><img src="images/tabs/bobbait.png" /></div></a>
<a href="#"><div class="nav_link"><img src="images/tabs/community.png" /></div></a>
<a href="#"><div class="nav_link"><img src="images/tabs/media.png" /></div></a>
<a href="#"><div class="nav_link"><img src="images/tabs/radio.png" /></div></a>
<a href="#"><div class="nav_link"><img src="images/tabs/habbocontent.png" /></div></a>
<a href="#"><div class="nav_link"><img src="images/tabs/extras.png" /></div></a>
<a href="#"><div class="nav_link"><img src="images/tabs/openings.png" /></div></a>
</div>

<div class="headlines">
<div class="images"><img src="images/headlines.png" /></div>
<div class="text"><img src="images/blueheader.png"  /></div>
</div>

<div class="content">
<div class="subredheader">
<div class="headerred"><img src="images/red_header.png" /></div>
<div class="text"></div>
</div>

<div class="main">
<div class="headermain"><img src="images/mainheader.png" /></div>
<div class="text"></div>
</div>

CSS:

<style type="text/css">
body {
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
}

.header {
background-image: url(images/header_repeat.png);
width: 100%;
height: 64px;
}

.headercontianer {
width: 800px;
padding: 7px;
margin: 0px auto;
}

.userstatus {
width: 230px;
height: 50px;
float: left;
}

.radiostats {
width: 150px;
height: 50px;
float: left;
background-color: #FFFFFF;
margin-left: 50px;
}

.whatchathink {
width: 150px;
height: 65px;
background-color: #FFFFFF;
margin-left: 35px;
margin-top: -35px;
}

.logo {
background-image: url(images/logo.png);
width: 219px;
height: 86px;
float: right;
margin-top: 41px;
margin-bottom: 10px;
}

.navigation {
width: 800px;
margin: -2px auto;
}

.nav_link {
height: 27px;
float: left;
margin-left: 5px;
}

.headlines {
width: 687px;
height: 125px;
margin: 0px auto;
}

.images {
width: 519px;
margin-right: 10px;
float: left;
height: 125px;
}

.text {
width: 158px;
height: 125px;
float: right;
}

.content {
margin: 150px auto;
width: 562px;
}

.subredheader {
width: 198px;
float: left;
margin-bottom: 15px;
}

.headerred {
width: 198px;
height: 25px;
color: #FFFFFF;
}

.text {
width: 198px;
margin-top: 5px;
}

.main {
width: 354px;
float: right;
}

.mainheader {
width: 354px;
height: 13px;
}

.maintext {
width: 354px;
margin-top: 5px;
}
</style>

The blue header that is under (but on the left) of the green and blue boxes should be beside the two boxes, and at the top. It was fine until I added the content CSS. I don't know why it moved. +rep

[Jaysun]

I'm not exactly sure what the problem is but I'll have a closer look at the code soon. Also I think you have too much classes.

P.S The last part when you are explaining the problem it's a little confusing. It's probably because of the way you worded it.

[Decode]

I cba to read through all that code, but if you havn't allready make the box on the right float left and give it more width because it looks like it won't go there because there isn't enough room.

[wsg14]

I fixed, it just a simple mistake.