Keskustelu: Nettisivujen teko: CSS-ongelma

Koitan tässä suunnitella leiskaa.
sivu:
http://www.netsoccer2.com/leiskatest/
css filu:
http://www.netsoccer2.com/leiskatest/css/style.css

Sinisessä laatikossa olevat lilat laatikot olisi tarkoitus saada reunoihin. Vaaleammat vasempaan reunaan ja tummemmat oikeaan, mutta jokin tummemmissa "bugaa" tällä hetkellä.

Osaisiko joku kertoa, miten tämä onnistuisi?

Selitykset väreistä:
harmaa=content
sininen=left_float
punainen=right_float

vaalea lila=box1
tumma lila=box2

Voit lisätä ympäröivät elementit, joilla nuo floatit ovat. Luokat box1 ja box2 eivät sitten tarvitse floattia.

<div style="float: left">
  <div class="box1">l1</div>
  <div class="box1">l2</div>
</div>
<div style="float: right">
  <div class="box2">r1</div>
  <div class="box2">r2</div>
</div>

Kannattaa pitää mielessä myös clear-määre, jolla saa estettyä kelluvien elementtien menon samalle riville. Tällä kertaa se ei tosin ratkaissut koko ongelmaa.