CSS/HTML Problem

ataman

[Blockierte Grafik: http://img50.imageshack.us/img50/405/divfirefox3xr.gif]

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<title>HTML DIV TEST</title>
<style type="text/css">
body	{background-color:moccasin}
#main	{width:540px;background-color:lightblue;padding:30px;border:1px outset}
#d1	{float:left;width:200px;background-color:ivory;font-family:verdana;font-size:13px;padding:20px}
#d2	{float:right;width:200px;background-color:ivory;font-family:verdana;font-size:13px;padding:20px}
</style>
</head>
<body>
  <div id="main">
     <div id="d1">
           TEXT TEXT TEXT TEXT TEXT
           TEXT TEXT TEXT TEXT TEXT
           TEXT TEXT TEXT TEXT TEXT
           TEXT TEXT TEXT TEXT TEXT
           TEXT TEXT TEXT TEXT TEXT
           TEXT TEXT TEXT TEXT TEXT
     </div>
     <div id="d2">
           TEXT TEXT TEXT TEXT TEXT
           TEXT TEXT TEXT TEXT TEXT
           TEXT TEXT TEXT TEXT TEXT
           TEXT TEXT TEXT TEXT TEXT
           TEXT TEXT TEXT TEXT TEXT
           TEXT TEXT TEXT TEXT TEXT
     </div>
  </div>
</body>


</html>

Alles anzeigen

Die Höhe (height) kann ich nicht angeben, weil sie vom veränderbaren Inhalt (Text) abhängig ist.

An welche Stelle ist dieser HTML-Code fehlerhaft?

bugcatcher

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<title>HTML DIV TEST</title>
<style type="text/css">
body   {background-color:moccasin}
#main   {width:540px;background-color:lightblue;padding:30px;border:1px outset}
#d1   {float:left;width:200px;background-color:ivory;font-family:verdana;font-size:13px;padding:20px}
#d2   {float:right;width:200px;background-color:ivory;font-family:verdana;font-size:13px;padding:20px}
#d3   {height:0px; line-height:0px; font-size:0px; clear:both;}
</style>
</head>
<body>
  <div id="main">
     <div id="d1">
           TEXT TEXT TEXT TEXT TEXT
           TEXT TEXT TEXT TEXT TEXT
           TEXT TEXT TEXT TEXT TEXT
           TEXT TEXT TEXT TEXT TEXT
           TEXT TEXT TEXT TEXT TEXT
           TEXT TEXT TEXT TEXT TEXT
     </div>
     <div id="d2">
           TEXT TEXT TEXT TEXT TEXT
           TEXT TEXT TEXT TEXT TEXT
           TEXT TEXT TEXT TEXT TEXT
           TEXT TEXT TEXT TEXT TEXT
           TEXT TEXT TEXT TEXT TEXT
           TEXT TEXT TEXT TEXT TEXT
     </div>
     <div id="d3"></div>
  </div>
</body>
</html>

Alles anzeigen

Du musst den float auch wieder beenden (siehe css-clear-attribut).

Fx zeigts in Deinem Beispiel sogar richtig an. Der Code ist falsch und IE zeigt auch was falsches an, auch wenn es das gewünschte ist ; )