CSS til float af bokse
Jeg har følgende HTML blok<div id="content">
<div class="right" style="background-color: red;"> </div>
<div class="left" style="background-color: green;"> </div>
<div class="left" style="background-color: blue;"> </div>
<div class="right" style="background-color: yellow;"> </div>
<div class="right" style="background-color: black;"> </div>
<div class="left" style="background-color: gray;"> </div>
<div class="right" style="background-color: orange;"> </div>
<div class="right" style="background-color: pink;"> </div>
<div class="left" style="background-color: green;"> </div>
<div style="clear: both;"></div>
</div>
og har lagt følgende CSS på
div#content {
margin: 0 auto;
padding: 0;
width: 900px;
position: relative;
top: 100px;
background-color: #f0f0f0;
display: block;
}
.left {
height: 50px;
width: 540px;
float: left;
position: relative;
}
.right {
height: 100px;
width: 340px;
float: right;
clear: right;
}
Det jeg gerne vil, er at have alle .left -blokkende samlet i venstre side og alle .right -blokkende samlet i højre side.
Det virker også fint - men den relative positionering på .left, gør at den i Firefox følger den sidste .right-blok.
Jeg vil egentligt gerne have den til at gøre, som den gør i IE. Har prøvet en masse, men kan ikke komme på en holdbar løsning :)
