Rhodes: Wie 100% Breite mit floating DIVs?

SELF-Forum

Wie 100% Breite mit floating DIVs?

Rhodes
– Informationen zu den Bewertungsregeln

Hallo zusammen,

in einer HTML Datei start.html mit DIV Layout gibt es einen Container ID = "content". content soll die ganze Bildschirmfläche einnehmen, bis auf jeweils ein Header- und Footer-DIV mit 20px Höhe.

Innerhalb von content gibt es zwei Spalten, ebenfalls realisiert mit DIVs.

So sieht das also in etwas aus.

<body classes=...>
  <div class="header">das ist ein 20px hoher header</div>
  <div class="content">
    <div class="spalte_1">
      Diese Spalte hat float left und 200px Breite
   </div>
    <div class="spalte_2">
      Diese Spalte nimmt den Rest der Bildschirmbreite ein und hat kein Overflow
   </div>
  </div>

<div class="footer">das ist ein 20px hoher footer</div>
</body

Mein Problem ist, dass ich nicht weiss, wie ich es hinbekomme, dass spalte2 immer den Rest des Bildschirmes ausfüllt, und zwar auch bei Vergrössern und Verkleinern des Browserfensters.

Ich möchte das Ganze gerne ohne Javascript lösen, weiss aber ehrlich gesagt nicht wie. Auch soll verhindert werden, dass spalte2 durch ein float plötzlich unter die spalte 1 rutscht.

Hat jemand einen Tipp für mich?

Danke und Grüsse

Rhodes

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Wie 100% Breite mit floating DIVs?

    Axel Richter
    – Informationen zu den Bewertungsregeln

    Hallo,

    in einer HTML Datei start.html mit DIV Layout gibt es einen Container ID = "content". content soll die ganze Bildschirmfläche einnehmen, bis auf jeweils ein Header- und Footer-DIV mit 20px Höhe.

    Innerhalb von content gibt es zwei Spalten, ebenfalls realisiert mit DIVs.

    So sieht das also in etwas aus.

    <body classes=...>
      <div class="header">das ist ein 20px hoher header</div>
      <div class="content">
        <div class="spalte_1">
          Diese Spalte hat float left und 200px Breite
       </div>
        <div class="spalte_2">
          Diese Spalte nimmt den Rest der Bildschirmbreite ein und hat kein Overflow
       </div>
      </div>

    <div class="footer">das ist ein 20px hoher footer</div>
    </body

    Mein Problem ist, dass ich nicht weiss, wie ich es hinbekomme, dass spalte2 immer den Rest des Bildschirmes ausfüllt, und zwar auch bei Vergrössern und Verkleinern des Browserfensters.

    Die Breite ist doch nicht das Problem.

    .spalte_1 bekommt float:left und width:200px
    und
    .spalte_2 bekommt margin-left:200px

    Das wars dann schon. Damit ist spalte_2 immer so breit wie .content und wenn dieses keine explizite Breitenangabe hat, ist es so breit wie body und wenn dieser keine explizite Breitenangabe hat, ist er so breit wie html und der Viewport.

    Die Höhen sind das Problem. Da kann man nur tricksen. Siehe http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout.

    viele Grüße

    Axel

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln