konsument: dreispaltiges div layout..

Beitrag lesen

Solche "Problembeschreibungen" helfen auch nichts.

vielleicht hätte diese oder möglicherweise auch jene Problembeschreibung geholfen.

aber ums Problem nochmal zusammenzufassen:

So funktionierts im IE aber nicht im Firefox, da der feuerfuchs die Hintergrundfarbe vom "container" nicht mehr anzeigt..

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>TEST</title>

<style type="text/css">
         #container {
         width:800px;
         background-color:orange;
         }

#links {
         float:left;
         width:200px;
         background-color:red;
         }

#mitte {
         float:left;
         width:400px;
         }

#rechts {
         float:left;
         width:200px;
         background-color:red;
         }
   </style>

</head>
<body>
<div id="container">
   <div id="links">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   </div>
   <div id="mitte">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   </div>
   <div id="rechts">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   </div>
   <div style="clear:both"></div>
</div>
</body>
</html>

und so funktionierts im Firefox, aber nicht im IE, da im Explorer die "mitte" um die höhe von "rechts" einen Abstand von oben bekommt..

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>TEST</title>

<style type="text/css">
         #container {
         width:800px;
         background-color:orange;
         }

#links {
         float:left;
         width:200px;
         background-color:red;
         }

#mitte {
         width:400px;
         margin-left:200px
         }

#rechts {
         float:right;
         width:200px;
         background-color:red;
         }
   </style>

</head>
<body>
<div id="container">
   <div id="links">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   </div>
   <div id="rechts">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   </div>
   <div id="mitte">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   </div>
   <div style="clear:both"></div>
</div>
</body>
</html>

aber da ich diese problem schon in 4 verschiedenen foren erläutert habe, und keiner eine lösung dafür hat, werde ich wohl gesenkten hauptes aufgeben.

Viele Grüße