Patrick Schröder: Zweispalter: Probleme mit Breiten und flexiblem Inhalt

Hallo ihr,

ich bin zwar recht fit was CSS-Layouts angeht, aber bei mir taucht derzeit ein Problem auf, wo ich so direkt keine Lösung finde. Vielleicht fällt euch ja was ein, was etwas bringen könnte.

Zum Layout selbst:

<div style="width: 200px; float: left; padding: 0; margin: 0; border: 0;">
 // Navi, etc. Fehler sind ausgeschlossen
</div>
<div style="width: auto; float: left; padding: 0; margin: 0; margin: 10px; border: 0; text-align: left;">
 // Inhalte
</div>
<div style="clear: both;"></div>

Der rechte Teil sollte flexibel sein, beinhaltet aber hier und da tabellarische Auflistungen, die entsprechend die Breite 100% haben.

Der IE "füllt" quasi den Rest auf und setzt die Autobreite entsprechend ein. Der Firefox, eigentlich ja richtiger, verbreitert den div-Bereich aufgrund der Tabelle tatsächlich auf gesamte 100%, wodurch das float quasi überflüssig wird.

Hat jemand eine Idee, was man noch tun könnte?

Gruß Patrick

  1. Hi,

    <div style="width: 200px; float: left; padding: 0; margin: 0; border: 0;">

    Die Angabe von padding, margin und border ist hier überflüssig.

    <div style="width: auto; float: left; padding: 0; margin: 0; margin: 10px; border: 0; text-align: left;">

    Auch hier sind alle Angaben außer float und die gewünschten 10px margin überflüssig.

    Der IE "füllt" quasi den Rest auf und setzt die Autobreite entsprechend ein. Der Firefox, eigentlich ja richtiger, verbreitert den div-Bereich aufgrund der Tabelle tatsächlich auf gesamte 100%, wodurch das float quasi überflüssig wird.

    Hat jemand eine Idee, was man noch tun könnte?

    Floate den Inhalt nicht und gebe ihm margin-left:210px. Dann bekommt er nur noch die restliche Breite.

    freundliche Grüße
    Ingo

    1. Hello out there!

      Floate den Inhalt nicht und gebe ihm margin-left:210px. Dann bekommt er nur noch die restliche Breite.

      Was den Sinn des Floatens der Navigation aber zunichte macht. Anstatt das bei schmalen Viewport beide Boxen untereinander dargestellt werden, wird das Layout unflexibel.

      See ya up the road,
      Gunnar

      --
      “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
      1. Hi,

        Was den Sinn des Floatens der Navigation aber zunichte macht. Anstatt das bei schmalen Viewport beide Boxen untereinander dargestellt werden, wird das Layout unflexibel.

        Stimmt, diesen Nachteil muß man dabei inkauf nehmen. Bei meiner Seite habe ich ihn zumindest über Javascript behoben.

        freundliche Grüße
        Ingo