Mærkelig float fejl...

Fordi der er nogle problemer med box-modellen i alle browsere.

Den første grund:
Det betyder at et indre element optager 100% af det ydre element samt den ekstra padding eller margin (afhængig af browser) der er sat.
Dette kan fikses ved at lægge en div rundt om det indre-element uden at fastsætte en bredde. Div-elementer optager automatisk 100%, men har beholder samtidig sin dynamik.

Anden grund kan være:
CSS og HTML attributter spiller ikke sammen.
cellspacing + cellpadding + Css:width = deform bredde.


Brug firebug til firefox til at inspicere din HTML og CSS.

For mig at se ser det ens ud i opera firefox og ie så det lader til at du have fixet problemet.

1. float og "display: inline" modsiger hinanden.
2a. smid <div style="clear: both"></div> efter det sidste element med float, det fikser højden.
2b. set en højde på elementet der omgiver dine to float elementer.
3. span-elementer er allerede fra fødslen et inline element.

Eksempler:

<div style="height: 20px;">
    <div style="float: left;"></div>
    <div style="float: right;"></div>
</div>

<div style="height: 20px;">
    <div style="float: left;"></div>
    <div style="float: right;"></div>
    <div style="clear: both;"></div>
</div>

Kan du så ikke også lige tjekke, hvorfor mine to divs ikke er lige lange... Jeg har sat width:100% på begge, men det virker åbenbart ikke...

Jep.. Det har jeg, fandt ud af at borders er inden i en fx <div> og ikke uden på. Var derfor nød til at øge vidten med 4 pixels.