float: left balader i Mozilla Firefox
Jeg sitter å arbeider med et site desing og opplever i den forbindelse noen balader med float: left i Mozilla Firefox.For å illustrere problemet har jeg lavet en enklere utgave av den koden som skaper problemene:
CSS koden:
body{
font: 11px Arial, Verdana, sans-serif;
width: 980px;
border: 2px solid green;
padding: 0px;
margin: 0px auto 0px auto;
}
#main_container{
width: 978px;
background-color: grey;
border: 2px solid yellow;
}
#content_container{
width: 903px;
margin: 27px auto 0px auto;
border: 2px solid purple;
}
.left{
width: 39%;
height: 500px;
float: left;
background: red;
}
.right{
width: 60%;
height: 500px;
float: right;
background: blue;
}
Og tilhørende HTML kode:
<body>
<div id="main_container">
<div id="content_container">
<div class="left">
</div>
<div class="right">
</div>
</div>
</div>
</body>
</html>
I Firefox havner altså <div class="left"> og <div class="right"> utenfor <div id="main_container"> og <div id="content_container">. Kolonnene opptrer med andre ord ikke innenfor de aktuelle containerene.
Er det noen som har noen innspill til hva jeg kan gjøre for å overkomme dette problemet?
Mvh
LarMa
