Florian: Anordnung von DIVs im IE6

SELF-Forum

Anordnung von DIVs im IE6

Florian
– Informationen zu den Bewertungsregeln

Hallo!

Vielleicht kann mir jemand bei folgendem Problem helfen:

Ich habe eine Seite mit 3-Spalten-Layout, linke und rechte Spalte je 250px breit, realisiert per CSS über {float: left bzw. right; width=250px}.
Im mittleren Content-Bereich {margin: 0 250px} habe ich DIVs mit fester (gleicher) Breite und Höhe, die sich über {float: left} je nach Fensterbreite automatisch anordnen sollen, also sauber untereinander und je nach Fensterbreite auch nebeneinander.

Das funktioniert im Firefox auch ganz prima, nur der IE macht Ärger. Bei manchen Fensterbreiten zerhaut er mir das Layout, indem er Boxen unter den Inhalt der rechten Spalte schiebt. Dabei sollten sie eigentlich komplett im Content-Bereich bleiben.

Anschauungsmaterial gibt es hier:

http://www.barc.de/index.php?id=448

Um das Problem nachvollziehen zu können, muss man eventuell etwas mit der Fensterbreite im IE spielen.

Ich wäre froh, wenn mir jemand weiterhelfen könnte. Mich hat dieses Problem schon viele (ergebnislose) Stunden gekostet.

Viele Grüße

Florian

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Anordnung von DIVs im IE6

    Engin Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hi Florian,

    Anschauungsmaterial gibt es hier:

    http://www.barc.de/index.php?id=448

    http://www.barc.de/index.php?id=448

      
<!DOCTYPE html  
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<?xml version="1.0" encoding="iso-8859-1"?>  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

    Das ist ja mal was ganz neues. ;-)

    Normalerweise steht der hier ganz oben als erste Zeile und schickt den IE in den Quirks Mode.

      
<?xml version="1.0" encoding="iso-8859-1"?>

    Was er in deinem Fall bewirkt oder bewirken soll weiss ich leider nicht, versuchs dochmal, in dem du diese Zeile löschst.

    Grüße,
    Engin
     GYRO

    --
    Dilated peoples|Team Vestax
    Gut ist der, der nach dem finden noch weiß, was er suchte.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Anordnung von DIVs im IE6

      Engin Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hi Engin,

      Der Kompatibilität wegen Quirks Mode.

      Grüße,
      Engin
       GYRO

      --
      Dilated peoples|Team Vestax
      Gut ist der, der nach dem finden noch weiß, was er suchte.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Interessantes Problem ...

    Bud
    – Informationen zu den Bewertungsregeln

    Hi,

    du hast wirklich ein interessantes Problem. ;-) Nachdem ich mit deinem Quelltext nicht weiter gekommen bin, habe ich ein Dummy gebaut - mit dem gleichen Verhalten. Eine Lösung des Problems habe ich keine gefunden, aber das hat ja nichts zu heißen. Um anderen das Problem schneller zu verdeutlichen, hänge ich mal meine Testdatei an.

    Möchte aber trotzdem den Verdacht äußern, dass das nichts wird.

    vg Bud

      
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  
<html lang="de" xml:lang="de" xmlns="http://www.w3.org/1999/xhtml">  
  
 <head>  
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>  
  <title></title>  
  <meta http-equiv="Content-Style-Type" content="text/css" />  
  <meta http-equiv="content-language" content="de" />  
  <style type="text/css" media="screen"><!--  
#container {  
 background-color: #ccc }  
  
#box2 {  
 background-color: #fc0;  
 width: 200px;  
 height: 100px;  
 float: left }  
  
#box3 {  
 background-color: #f60;  
 width: 200px;  
 height: 100px;  
 float: right }  
  
#box4 {  
 background-color: #c30;  
 margin-right: 200px;  
 margin-left: 200px }  
  
.boxen {  
 background-color: #600;  
 margin: 5px;  
 width: 200px;  
 height: 100px;  
 float: left }  
  
.clear {  
 background-color: #fc0;  
 height: 10px;  
 clear: left }  
  
--></style>  
 </head>  
  
 <body>  
  <div id="container">  
   <div id="box2"></div>  
   <div id="box3"></div>  
   <div id="box4">  
    <p>Dies ist ein Blindtext. An ihm lässt sich vieles ablesen über die Schrift, in der er gesetzt ist. Auf den ersten Blick wird der Grauwert der Schriftfläche sichtbar. Dann kann man prüfen, wie gut die Schrift zu lesen ist und wie sie auf den Leser wirkt. Man kann nachmessen, wie breit oder schmal sie läuft. Bei genauerem Hinsehen werden die einzelnen Buchstaben und ihre Besonderheiten erkennbar.</p>  
    <div class="boxen"></div>  
    <div class="boxen"></div>  
    <div class="boxen"></div>  
    <div class="boxen"></div>  
    <div class="boxen"></div>  
    <div class="clear"></div>  
   </div>  
  </div>  
 </body>  
  
</html>
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln