Mehrere DIVs in einer DIV-Box

[JulianBaumueller]

Hallo,

seit Anfang an, als ich das erste mal mit CSS zutun hatte, hat es mich schon gestört, da ich nicht weitergekommen bin, als ich zwei DIV-Boxen (eine link- und eine rechtsgefloatet) in eine große DIV-Box stecken wollte.

Die zwei DIVs sind dann zwar zusammen geblieben und nicht außeinander gegangen (wenn ich z.B. die große box 1000px groß gemacht hab), dann waren die zwei kleinen auch da drin, wenn ich die große jedoch per background und border sichtbar gemacht hab, hat man immer gesehen, dass sie sich über den zwei Boxen befand und nicht wie vorgesehen die beiden umschlang.

Code:

  
#gross {  
width: 1000px;  
border: none;  
background: transparent;  
}  
  
#klein1 {  
width: 200px;  
float: left;  
border: 1px solid #000;  
background: #CCC;  
}  
  
#klein2 {  
width: 700px;  
float: right;  
border: 1px solid #000;  
background: #FF0000;  
}  

  
<div id="gross">  
 <div id="klein1">  
  <span>Dies ist Boxmodel 1</span>  
 </div>  
  
 <div id="klein2">  
  <span>Und dies Model 2</span>  
 </div>  
</div>  

Und jetzt wenn ich #gross sichtbar mache (via background: #555555; und border: 3px solid #000;), dann sieht man dass, dass sich die große Box über den beiden da so befindet und sie nicht umgibt wie so üblich finde ich..

Denke dass Problem hatte mal jemand schon..

Freue mich über jede Antwort.
MfG
JulianBaumueller

[Der Martin]

Hi,

[...] als ich zwei DIV-Boxen (eine link- und eine rechtsgefloatet) in eine große DIV-Box stecken wollte.
Die zwei DIVs sind dann zwar zusammen geblieben und nicht außeinander gegangen (wenn ich z.B. die große box 1000px groß gemacht hab), dann waren die zwei kleinen auch da drin, wenn ich die große jedoch per background und border sichtbar gemacht hab, hat man immer gesehen, dass sie sich über den zwei Boxen befand und nicht wie vorgesehen die beiden umschlang.

ja, das ist richtig so - auch wenn es für einen Einsteiger nicht unbedingt einleuchtend ist. Gefloatete Elemente sind aus dem Kontext ihres Elternelements herausgelöst und beeinflussen daher dessen Größe nicht mehr. Probates Mittel dagegen: overflow: hidden für das Containerelement.

So long,
 Martin