Hjælp mit design virker ikke normalt i FF

For mig virker det hverken i IE eller FF .?

Det her er tit et problem man støder ind i i forbindelse med div-elementer og CSS' float-egenskab..
Der er egentlig to problemer: 1. #right og #top_menu flyder for langt ud til højre og 2. #left, #content og #right flyder udenfor #page.

Det første issue handler mest om at padding og bredde og højde i % er et no-go. Så snart du beder browseren om at lave noget 100% stort, og derefter tilføjer nogle pixels i hver side går det galt. Så stryg enten "width: 100%;" eller padding i #top_menu og .box_top...

Andet issue handler om CSS' float-egenskab.. En ret nifty ting, men man skal vide hvordan man bruger den. Jeg tror ikke jeg skal komme med den lange forklaring, kort og godt er problemet at du bliver nød til at oprette et footer-element som forklarer at #page-elementet er slut - det forstår browseren nemlig ikke når det er float-elementer.. Jeg håber du forstod det der.. Egentlig skal du bare indsætte dette til sidst:

      <div id="content">
        <div class="box">
          <div class="box_top">Hjælp med fejlen!</div>
          Ja, som du kan se er der noget galt. Hjælp mig<br>Og hvis du ikke kan se hvad jeg mener, så åben den i IE eller FF(firefox)
        </div>
      </div>
      
    </div>
    <div id="footer">
        Du behøver ikke skrive noget her...
    </div>
  </div>

</body>
</html>

... og i CSS'en ...

#footer {
 clear: both;
}

.. På den måde "clearer" du en hel ny linje, så højden på #left, #content og #main bliver taget i betragtning som en del af #pages højde.

Dette burde også virke i IE. Spørg endelig hvis der er noget jeg ikke har forklaret godt nok.

Du kan muligvis bruge denne video guide http://www.woox.dk/videos/nottablesjustcss/nottablesjustcss.html

Det skal lige siges at det er første gang jeg leger med div i HTML kodningen

Tak, det hjalp med at flytte den ned , så må jeg prøve at løse det andet.