[CSS] Problem mit verschachtelten divs

Cyber-Shadow

Hallo,

hat jemand einen Plan, warum das nicht funktioniert?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>
      Div-Test
    </title>
    <style type="text/css">
      <!--
        .outer
	{
	  background-color: #FF0000;
	  padding: 5px;
	  border: 5px solid #000000;
	  overflow: visible;
	}
	.inner
	{
	  background-color: #00FF00;
	  margin: 10px 10px 10px 10px;
	  width: 200px;
	  height: 200px;
	  border: 1px solid #000000;
	  float: left;
	}
      -->
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner">  
       Text
      </div>
      <div class="inner">  
        Text
      </div>
      <div class="inner">  
        Text
      </div>
      <div class="inner">  
        Text
      </div>
    </div>
  </body>
</html>

Ich würde erwarten, dass ich ein paar "inner"-Boxen in einer "outer"-Box sehe. In Wirklichkeit werden aber die "inner"-Boxen unterhalb der "outer"-Box angezeigt. Habe auch schon versucht "display: inline" zu "inner" hinzuzufügen, allerdings ohne Erfolg. Ich habe das Gefühl, dass das irgendwie mit meinem "float: left" zusammenhängt, allerdings brauche ich das ja, dass die Boxen nebeneinander angezeigt werden.

Aziz

Dein outer div dehnt sich deshalb nicht vertikal, weil all seine Kindelemente die Eigenschaft "float:left" besitzen. Ich hab dieses Verhalten schon mal beobachtet, kann mich aber nicht mehr erinnern ob es dafür ein Workaround gibt. Probier mal nach dem letzten inner div ein div einzufügen, welches die Eigenschaften "clear:both" besitzt.

Cyber-Shadow

Cool, danke für den Tip. Habe jetzt vor das erste und nach dem letzten inner div ein

<div style="clear: both;">
</div>

eingefügt und es klappt. Das obere div braucht man noch für den IE, da er sonst komischerweise das äußere div erst ab dem zweiten inneren Block zeichnet (wenn man das Browser-Fenster klein genug macht).

Gibt es für dieses Verhalten einen logischen Grund? Immerhin machen es ja alle Browser (zumindest IE, Firefox und Opera) so...