2 kolumner på samma rad

Håller på med en hemsida och stött på ett problem som inte brukar hända.

Mina kolumner är inte på samma rad, kolla bild nedanför:

http://i54.tinypic.com/15otggj.png

HTML:

 <div id="middle">
                 <div id="textfix">
                 <div class="boxtop"><center> <b></center></b></div>
                    <div class="boxmiddle">
                    <div id="textfix" style="">&nbsp;
                        <br> Text kommer vara här!
                    </div>
                     </div>
                    <div class="boxbottom"></div>
                    </div>
                 <div class="boxlefttop"><center> <b></center></b></div>
              <div class="bottom"></div>
                  
            </div>
        </div>

och CSS...

body{ 
    text-align: center; 
    width: 1097px; 
    margin:0 auto; 
    font-family: Verdana; 
} 
.site{ 
    text-align: left; 
    width:1097px; 
    margin:0 auto; 
    margin-top:10px; 
} 
.rollingtext{ 
    width:994px; 
    height:25px; 
    background: url(hemsidelayout/senaste.png); 
    float:right; 

} 
.senaste{ 
    width:96px; 
    height:25px; 
    background: url(hemsidelayout/senasten.png); 
    float:left; 

} 
.header{ 
    width:1097px; 
    height:210px; 
    background: url(hemsidelayout/header.png); 
     
} 
.menyram{ 
    width:1095px; 
    height:39px; 
    background: url(hemsidelayout/menyrad.png); 
    border: 1px solid; 
    line-height: 39px; 
} 
.meny{ 
     
    height:39px; 
    padding: 0 10 0 10; 
    text-decoration: none; 
    color:white; 

} 
.meny:hover{ 
    height:39px; 
    text-decoration: underline; 
    font-weight: bold; 
} 
.text{ 
    line-height: 25px; 
    margin: 0 7 0 7; 
} 
#textfix { 
padding: 10px; 
font: 10px Verdana; 
text-align: left; 
} 
#middle { 
background-image: url(hemsidelayout/ram.png); 
width: 1097px; 
background-repeat: repeat-y; 
} 
.bottom{ 
    width: 1097px; 
    height: 25px; 
    background-image: url(hemsidelayout/rambottom.png); 
} 
.boxtop{ 
    width: 720px; 
    height: 44px; 
    background-image: url(hemsidelayout/box1.png); 
    line-height: 44px; 
    font-size: 16px; 
    float:left; 
    display: inline; 
} 
.boxmiddle{ 
    width: 720px; 
    height: auto; 
    background-image: url(hemsidelayout/rambox.png); 
    background-repeat: repeat-y; 
} 
.boxbottom{ 
    width: 720px; 
    height: 14px; 
    background-image: url(hemsidelayout/boxbottom.png); 
} 
.boxlefttop{ 
    width: 340px; 
    height: 44px; 
    background: url(hemsidelayout/topright.png); 
    float:right; 
    margin-right: 10px; 
    display: inline; 
    line-height: 44px; 
}

Om jag skulle kunna få hjälp så fort jag kan och fixa detta problemet skulle det vara jättebra :)

1. OT men skriv inte så här:

<center> <b></center></b>

2. Det är jobbigt att läsa din HTML, du använder massa "onödiga" divar och har dåliga namn på dem och det är indenterat fel.
Kanske har det kommit in ett </div> för mycket där nånstans (det är en mer slutag än startag men det kan bero på att du klippt ut det).

Nedan har jag gjort lite indentering så man ser det lite bättre:

<div id="middle">
	<div id="textfix">
		<div class="boxtop"><center> <b></center></b>
		</div>
		<div class="boxmiddle">
			<div id="textfix" style="">&nbsp;
				<br> Text kommer vara här!
			</div>
		</div>
		<div class="boxbottom">
		</div>
	</div>
	<div class="boxlefttop"><center> <b></center></b>
	</div>
	<div class="bottom">
	</div>
                  
</div>

</div>

Som du ser ligger inte boxtop och boxlefttop i samma div, vilket dom måste göra för att floaten ska bli rätt. Och igen dåligt namn när du har boxlefttop med float till höger, välj namn som inte säger nått om formateringen utan vad det är i stället.