[CSS] Divs verschillend in Firefox en IE

[DutchAddick]

Ik heb een pagina met 2 div columns die er in Firefox normaal uitziet (2 columns naast elkaar), maar in IE niet. De 2e column schuift naar beneden. In Safari (zowel Apple als Windows) wordt de 2e column helemaal niet getoond. Dit is de pagina: http://www.dutchaddick.com/info.php?ground=40

Dit is de code:

code:

<div id="content">
  <div class=splitinfoleft>
    <div class=box>bla</div>
    <div class=box>bla</div>
    <div class=box>bla</div>
  </div>
  <div class=splitinforight>
    <div class=box>bla</div>
  </div>
</div>
<div id="footer">bla</div>

Dit is de css:

code:

.splitinfoleft{
float:left;
width:45%;
}
.splitinforight{
float:right;
width:55%;
}
.box{
margin: 5px;
padding: 10px;
border:1px solid #c0c0c0;
background-color:#fafbfc;
color:#505050;
line-height:1.5em;
}
#footer{
clear:both;
width:898px;
padding:5px 0;
margin:0 1px;
font-size:0.9em;
color:#f0f0f0;
background:#bb0000;
}

Wat doe ik fout?

[Bozozo]

Je float twee objecten die samen in de breedte precies 100% van hun parent zijn. Maak de rechter een procentje smaller en het zou goed moeten gaan in IE.

[crisp]

Je hebt in dit soort gevallen altijd te maken met afrondingsfouten die sommige browsers maken. Je zou ook kunnen opteren om de breedtes van je kolommen niet in procenten maar in pixels op te geven.

[DutchAddick]

Het was 2%
Maar thanks, het ziet er nu in IE tenminste weer normaal uit
Alleen in Safari wordt de 2e column nog steeds niet getoond, nog meer eraf halen

[ Voor 6% gewijzigd door DutchAddick op 15-11-2007 10:20 ]