fischhase: float/clear wirkt containerübergreifend. Warum?

Beitrag lesen

liebes Forum,

ich bin mit meinem Latein am Ende. Folgendes Problem: Ich habe zwei DIVs #content-left und #content-main. Das #content-left hat einen float:left, um den #content-main rechts daneben zu stellen. Beides befindet sich in einem umgebenden DIV #content

#content
|----------------------------------|
|#content-left  #content-main      |
||------------| |-----------------||
||            | |                 ||
||            | |                 ||
||            | |                 ||
||            | |                 ||
||            | |                 ||
||____________| |_________________||
|__________________________________|

Wenn ich nun im #content-left einen Inhalt in einem DIV habe und im #content-main zwei DIVs. Teilweise haben die Inhalte in den DIVs ein clear:both.

Nun passiert Folgendes: Das 1. DIV innerhalb des #content-main positioniert korrekt, das 2. DIV hingegen beginnt erst bei Y = Ende des DIVs in #content-left:

#content
|----------------------------------|
|#content-left  #content-main      |
||------------| |-----------------||
||DIV         | | DIV 1           ||
|||----------|| | |--------------|||
|||          || | |              |||
|||          || | |______________|||
|||          || |                 ||
|||          || |                 || < ungewollter Abstand
|||__________|| | DIV 2           ||
||            | | |--------------|||
||            | | |              |||
||            | | |______________|||
||____________| |_________________||
|__________________________________|

Zum Verständnis:
Wenn ich #content-left einen float gebe, umfließt #content-main #content-left. Elemente innerhalb von #content-main sollten sich davon unbeeindruckt zeigen, oder?

  
<div id="content">  
  <div id="content-left">  
    <div id="c65" class="csc-default">...</div>  
  </div>  
  <div id="content-main">  
    <div id="c75" class="csc-default">...</div>  
    <div id="c79" class="csc-default">...</div>  
  </div>  
</div>