Frank: Anpassung des mittleren (nichtfloatenden) Blockelements

Hallo!

Ich habe da mal ein kleines Verständnisproblem: Ich habe ein dreispaltiges Layout gewählt wie in Selfhtml beschrieben. Die beiden äußeren DIVs haben eine feste Breite und floaten links und rechts. Das dritte Blockelement hat keine Breite angegeben und soll den gesamten mittleren Raum einnehmen.

Um zu verhindern, dass am (vertikalen) Ende der beiden äußeren DIVs das Mittlere umgebrochen wird und über die ganze Seite geht, habe ich margins definiert. Margin-left und margin-right sind etwas größer als die Breite der beiden äußeren Elemente. Das geht im IE prima, nur im Firefox wird dieser Rand anscheinend nicht beim äußeren Fenster addiert, sondern erst beim (horizontalen) Ende der beiden äußeren DIVs. Ich habe also beispielsweise links das DIV mit 100px Breite und _zusätzlich_ die 105px margin-left bevor der Text beginnt.

Habe ich was vergessen oder falsch verstanden?

Viele Grüße,
Frank

  1. Hi Frank!

    Hast Du auch paddings genutzt? Und wenn ich Dich richtig verstanden habe, dann hilft Dir folgendes Dokument weiter: Der Box-Modell-Fehler des Internet Explorers.

    Beste Grüße,
    Ben

    1. Hallo!

      Hi Frank!

      Hast Du auch paddings genutzt?

      Nö, eigentlich nicht:

      #sidebar {
        clear: both; /* clear the header */
       float: left;
       width: 182px;
       padding-top: 17px;
       border-right: 1px solid #000000;
       border-bottom: 1px solid #000000;
      }

      #sidebar-2 {
       float: right;
       text-align: center;
       width: 220px;
       border-left: 1px solid #000000;
       border-right: 1px solid #000000;
       border-bottom: 1px solid #000000;
       margin-right: 51px; /* right border */
        padding-top: 17px;
      }

      #content {
       margin: 17px 280px 0px 190px; /* prevents floating below the sidebars */
       overflow: hidden;
      }

      Und wenn ich Dich richtig verstanden habe, dann hilft Dir folgendes Dokument weiter: Der Box-Modell-Fehler des Internet Explorers.

      Nö, auch nicht. Ich habe ja geschrieben, dass das im IE richtig angezeigt wird (IE7).

      Beste Grüße,
      Ben

      1. hi,

        #content {
        margin: 17px 280px 0px 190px; /* prevents floating below the sidebars */
        overflow: hidden;
        }

        Und ohne overflow?

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Ja, das war's.

          Aber was mach ich jetzt mit meinem overflow?
          Beispiel: Ein zu großes Bild würde über das rechte DIV gehen...

          hi,

          #content {
          margin: 17px 280px 0px 190px; /* prevents floating below the sidebars */
          overflow: hidden;
          }

          Und ohne overflow?

          gruß,
          wahsaga