Der Martin: float: Elemente variabler Breite nebeneinander

SELF-Forum

float: Elemente variabler Breite nebeneinander

Der Martin
– Informationen zu den Bewertungsregeln

Hallo,

ich habe anscheinend gerade eine Denkblockade bei der Verwendung von float zum Layouten. Ich möchte zwei Boxen nebeneinander plazieren:

Beispielseite

Die blaue Box (Linkliste) und die pinkfarbene Box (Inhalt) sollen nebeneinander stehen. Dazu floate ich sie beide nach links. Firefox und Opera zeigen es vermutlich richtig an, der IE dagegen so, wie ich es möchte. ;-)
Die Seite ist valides HTML 4.01 Strict, auch das CSS ist laut W3C-Validator fehlerfrei.

Die Lösungsansätze, die ich bisher gefunden habe (SELFHTML-Beispiellayouts, Archivbeiträge), gehen leider alle davon aus, dass mindestens eine der Boxen eine Breitenangabe hat. Aber gerade das möchte ich nicht. Die Navi soll so breit sein, wie es ihr Inhalt erfordert, und die Content-Box einfach den Rest nutzen.
Die beiden Boxen zu verschachteln wäre eine Möglichkeit - daran gefällt mir aber nicht, dass dann ein Teil des Textes im Content-Bereich wieder *unter* die Navi-Box rutscht, wenn er entsprechend lang (oder die Navi entsprechend kurz) ist. Da die Breite der Navi variablel ist, kann ich das nicht mit margin oder padding ausgleichen.
Was mache ich falsch?

Danke für alle Hinweise,
 Martin

--
Fettflecke werden wieder wie neu, wenn man sie regelmäßig mit etwas Butter einschmiert.
Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. float: Elemente variabler Breite nebeneinander

    molily Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    Hallo,

    Die Lösungsansätze, die ich bisher gefunden habe (SELFHTML-Beispiellayouts, Archivbeiträge), gehen leider alle davon aus, dass mindestens eine der Boxen eine Breitenangabe hat. Aber gerade das möchte ich nicht. Die Navi soll so breit sein, wie es ihr Inhalt erfordert, und die Content-Box einfach den Rest nutzen.

    http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout

    float bei #content wegnehmen, overflow:hidden hinzufügen. Bewirkt, dass #content ein sogenannter Block Formatting Context wird (siehe Artikel).

    Mathias

    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. float: Elemente variabler Breite nebeneinander

      Der Martin
      – Informationen zu den Bewertungsregeln

      Hallo Mathias,

      http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout
      float bei #content wegnehmen, overflow:hidden hinzufügen. Bewirkt, dass #content ein sogenannter Block Formatting Context wird (siehe Artikel).

      danke, das sieht in Opera und FF schon mal gut aus. Jetzt brauche ich noch einen IE-Workaround, denn da passiert nun genau das, was ich nicht will:

      +----------------------------------
       | Navi |  Text  Text  Text  Text
       | Navi |  Text  Text  Text  Text
       | Navi |  Text  Text  Text  Text
       +------+  Text  Text  Text  Text
       |   Text  Text  Text  Text  Text
       |   Text  Text  Text  Text  Text

      Der Content-Block beginnt also wie gewünscht auf gleicher Höhe mit der Navi, rutscht dann aber im weiteren Verlauf drunter.

      Ciao,
       Martin

      --
      Idealismus wächst mit der Entfernung zum Problem.
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. float: Elemente variabler Breite nebeneinander

        molily Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo,

        Jetzt brauche ich noch einen IE-Workaround

        Den du auch im Artikel finden wirst, Stichwort hasLayout.

        Mathias

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. float: Elemente variabler Breite nebeneinander

          Der Martin
          – Informationen zu den Bewertungsregeln

          Hi,

          Jetzt brauche ich noch einen IE-Workaround
          Den du auch im Artikel finden wirst, Stichwort hasLayout.

          danke, das ist es. Da viele Beispiele im Artikel in meinem IE5.5 etwas verstümmelt aussehen, habe ich angenommen, das hasLayout-Konzept greife erst ab IE6. Das ist wohl nicht so.

          Schönen Sonntag noch,
           Martin

          --
          Lieber blau machen, als sich schwarz ärgern.
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. float: Elemente variabler Breite nebeneinander

            molily Homepage des Autors
            – Informationen zu den Bewertungsregeln

            Hallo,

            Da viele Beispiele im Artikel in meinem IE5.5 etwas verstümmelt aussehen, habe ich angenommen, das hasLayout-Konzept greife erst ab IE6. Das ist wohl nicht so.

            Es gibt auch nur ein Beispiel im Artikel, das im IE funktionieren soll, und das sieht im IE 5.5 anscheinend recht passabel aus, obwohl IE 5.x nicht beachtet wurde:
            http://browsershots.org/screenshots/aca482279d1ff8d2a0403d8721f1a84f/

            IE 5.01 hingegen versemmelts ordentlich:
            http://browsershots.org/screenshots/7c61c15cb08ae618bf317959438e6912/
            ;)

            Mathias

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln