CSS - hoved div boks blir kortere i FireFox

[Dddddd]

Jeg har et problem med noen div bokser (og css).

Problemet er at jeg plasserer alt i en hovedboks. I denne hovedboksen har jeg tre nye div bokser, hvor to av de er plassert ved siden av hverandre og en under.

 

Det fungerer fint både i IE og Opera, men når jeg tester det i FireFox så blir hovedboksen kortere enn innholdet i de andre boksene tilsider. Siden det ikke er noen bestemt høyde er det ikke heller mulig å definere en bestemt høyde på hovedboksen.

 

Hvis dette var dårlig forklart så er dette et eksempel:

 

<style type="text/css"><!-- 
.boks1 { 
   width: 800px; 
   background: #444444; 
} 

.boks2 { 
   width: 500px; 
   background: #EEEE66; 
   height: 500px; 
   float: left; 
} 

.boks3 { 
   width: 300px; 
   background: #EE66EE; 
   height: 100px; 
   float: right; 
} 

.boks4 { 
   width: 600px; 
   background: #66EEEE; 
} 


--></style> 

<div class="boks1"> 

   <div class="boks2">text</div> 
   <div class="boks3">text</div><br> 

   <div class="boks4">text</div> 

</div> 

 

 

Er det noen som hva hva jeg må gjøre for å sørge for at hovedboksen blir like lang som den totale lengden på de andre boksene i FireFox?

 

Takk til alle som har forslag!

 

Se bildene for hvordan resultatet blir i Opera i forhold til FireFox.

Endret 1. april 2006 av Dddddd

[funkweb]

Har sett gjennom, prøv slik:

 

CSS:

 

* {
margin: 0;
padding: 0;
}

#root { 
  width: 800px; 
  background: #444444;
} 

.venstre { 
  width: 500px; 
  background: #EEEE66; 
  float: left;
  height: 300px;
} 

.hoyre { 
  width: 300px; 
  background: #EE66EE; 
  float: right;
  height: 100px;
} 

.bunn { 
  width: 800px; 
  background: #66EEEE;
  clear: both;
} 

 

HTML:

 

<div id="root">
<div class="venstre">Venstre</div>
<div class="hoyre">Høyre</div>
<div class="bunn">Bunn</div>
</div>