Markus: Unerwünschtes umfließen von Elementen

Tach Post!
Ich hätte noch ein Problem bei meinem dreispaltigen Layout, dieses mal mit dem Firefox.

Links: Navigation (float: left)
Rechts: Infobox (float: right)
Der Bereich in der Mitte soll den Hauptinhalt aufnehmen. Allerdings umfließt der Hauptinhalt die Navi und die Infobox, er wird also am Ende der linken und rechten Box breiter und nimmt die ganze Bildschirmbreite ein (Firefox), statt wie im IE brav die Flächen unterhalb der Boxen frei zu lassen.

Mein Code ähnelt dem dreispaltigen Layout hier:

http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltig

Ich hab o.g. Beispielcode studiert, erkenne aber nicht, das dort dem Brauser irgendwie mitgeteilt wird er solle doch das umfließen unterlassen.

Jemand eine Idee wie ich das Problem lösen kann?

Gruß und Dank,

Markus

  1. hi,

    http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltig

    Ich hab o.g. Beispielcode studiert, erkenne aber nicht, das dort dem Brauser irgendwie mitgeteilt wird er solle doch das umfließen unterlassen.

    Dabei ist der Teil, der im CSS für div#Inhalt dafür zuständig ist, doch sogar extra in fetter Schrift dargestellt ...

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
  2. Hallo Markus,

    Links: Navigation (float: left)
    Rechts: Infobox (float: right)
    Der Bereich in der Mitte soll den Hauptinhalt aufnehmen. Allerdings umfließt der Hauptinhalt die Navi und die Infobox, er wird also am Ende der linken und rechten Box breiter und nimmt die ganze Bildschirmbreite ein (Firefox), statt wie im IE brav die Flächen unterhalb der Boxen frei zu lassen.

    ohne das Ergebnis gesehen zu haben: Hast du dem mittleren Element - Hauptinhalt - jeweils ein margin von der Breite der gefloateten Elemente oder etwas mehr verpasst?

    Wenn gefloatet wird, wird das Element aus dem Textfluss genommen. Der Hauptinhalt nimmt als jeden anderen verfügbaren Platz ein

    <ul id="linkenavi">  
    [...]  
    </ul>  
      
    <div id="rechteinfobox">  
    [...]  
    </div>  
      
    <div id="hauptinhalt">  
    [...]  
    </div>  
    [...]
    
    ul.linkenavi {  
      width:13em;  
      float:left;  
    }  
    div.rechteinfobox {  
      width:13em;  
      float:right;  
    }  
    div#hauptinhalt {  
      margin:0 14 em 0 14em;  
    }
    

    Mit freundlichen Grüßen,
    André

  3. Hi

    Links: Navigation (float: left)
    Rechts: Infobox (float: right)
    Der Bereich in der Mitte soll den Hauptinhalt aufnehmen. Allerdings umfließt der Hauptinhalt die Navi und die Infobox, er wird also am Ende der linken und rechten Box breiter und nimmt die ganze Bildschirmbreite ein (Firefox), statt wie im IE brav die Flächen unterhalb der Boxen frei zu lassen.

    Mein Code ähnelt dem dreispaltigen Layout hier:

    http://de.selfhtml.org/css/layouts/mehrspaltige.htm#dreispaltig

    Ich hab o.g. Beispielcode studiert, erkenne aber nicht, das dort dem Brauser irgendwie mitgeteilt wird er solle doch das umfließen unterlassen.
    wird es aber - mit

      
    div#Inhalt  
    {  
     margin: 0 12em 0 16em;  
     [...]  
    }  
    
    

    Jemand eine Idee wie ich das Problem lösen kann?

    Gib dem Mittlerem Brereich ein Margin-left/-right von der Breite der Boxen

    mfg
    Genie