Thomas: CSS Layout mit hilfe von Float

Hallo!

Beim Versuch ein Layout mit CSS für meine Webseite zu gestalten bin ich auf ein Problem gestoßen. Ich habe links ein breites div für den Content und rechts ein weniger breites div für ein paar Links. Dabei tun sich 2 Probleme auf.

1. Das Content div soll in der Breite variabel sein, das Links div soll eine feste Breite haben. Außerdem sollen beide divs immer Kontakt haben.

2. Beim Verkleinern des Browser-Fensters rutsch das Links div unter das Content div sobald nicht mehr genügend Platz vorhanen ist. Das soll nicht passieren. Geht das mit CSS? Ich fürchte fast nicht.

Hier mal der Ansatz:

[code lang=html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Zweispaltiges Layout</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <style type="text/css">
    #left {
      border: 1px solid red;
      width: 500px;
      float: left;
    }

#right {
      border: 1px solid green;
      width: 100px;
      float: right;
    }
    </style>
  </head>
  <body>
    <div id="left">
      Linke Seite Linke Seite Linke Seite<br>
      Linke Seite Linke Seite Linke Seite<br>
      Linke Seite Linke Seite Linke Seite<br>
      Linke Seite Linke Seite Linke Seite<br>
      Linke Seite Linke Seite Linke Seite<br>
      Linke Seite Linke Seite Linke Seite<br>
      Linke Seite Linke Seite Linke Seite<br>
      Linke Seite Linke Seite Linke Seite<br>
      Linke Seite Linke Seite Linke Seite<br>
    </div>
    <div id="right">
      Rechte Seite<br>
      Rechte Seite<br>
      Rechte Seite<br>
      Rechte Seite<br>
      Rechte Seite<br>
      Rechte Seite<br>
      Rechte Seite<br>
      Rechte Seite<br>
      Rechte Seite<br>
      Rechte Seite<br>
      Rechte Seite<br>
      Rechte Seite<br>
    </div>
  </body>
</html>

[/html]

Bin dankbar für jede Hilfe!

Grüße,
Thomas

    1. Das Content div soll in der Breite variabel sein, das Links div soll eine feste Breite haben. Außerdem sollen beide divs immer Kontakt haben.

    margin kennst du?

    1. Beim Verkleinern des Browser-Fensters rutsch das Links div unter das Content div sobald nicht mehr genügend Platz vorhanen ist. Das soll nicht passieren. Geht das mit CSS? Ich fürchte fast nicht.

    Das gemeinsame Elternelement benötigt eine Mindestbreite die der Summe der Mindestbreiten der Kinder entspricht.

    1. Hallo, Danke für die rasche Antwort.

      1. Das Content div soll in der Breite variabel sein, das Links div soll eine feste Breite haben. Außerdem sollen beide divs immer Kontakt haben.

      margin kennst du?

      Kenne ich, allerdings weiß ich grad nicht wie es mir bei dem Problem weiterhelfen soll. Kannst du mir da einen Tip geben?

      1. Beim Verkleinern des Browser-Fensters rutsch das Links div unter das Content div sobald nicht mehr genügend Platz vorhanen ist. Das soll nicht passieren. Geht das mit CSS? Ich fürchte fast nicht.

      Das gemeinsame Elternelement benötigt eine Mindestbreite die der Summe der Mindestbreiten der Kinder entspricht.

      Ich habe das Verutschen nach unten mit einem umschließenden div Container gelöst.

      [code lang=html]
      #container {
        width: 800px;
        margin: 10px;
        margin-left: auto;
        margin-right: auto;
      }
      [/html]

      Grüße,
      Thomas

      1. Nun bin ich ein kleines Stück weiter. Den Container habe ich entfernt und stattdessen width und margin-left eingesetzt und zwar so wie es hier beschrieben wird: http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout

        Es verrutscht nichts, beide divs haben Kontakt, aber nun ist das rechte div variablen, was ich eigentlich nicht möchte.

        <style type="text/css">
          #left {
            background-color: red;
            float: left;
            width: 700px;
          }

        #right {
            margin-left: 700px;
            background-color: green;
           }
        </style>

        1. Sieh' dir den Code mal genau an:
          float: left bedeutet, dass das Element links "treibt" und anderes "Treibgut" (nachfolgende Elemente) rechts daran vorbeifließen kann.

          Sprich: - deine linke Spalte ist mit einer festen Breite ausgestattet und ermöglicht es anderen Elementen rechts daneben Platz zu finden.

          #rechts hat einen Abstand zu linken Seite von 700px (was der Breite der linken Spalten entspricht) - eine Breite hat sie nicht. Nachdem es ein div-Element ist (und es sich um ein Block-Element handelt) nimmt es die verfügbare Breite (abzüglich des linken Außenabstands) ein.

          Selbriges Verhalten lässt sich natürlich auf umdrehen.

          btw: nennen deine Elemente lieber nicht #links und #rechts - da das Verhalten schnell per CSS umgedreht werden kann (oder völlig verändert) kann die rechte Spalte plötzlich auf der linken Seite sein[1] - oder aber beide sind untereinander.

          Sinnvolle Namen sind z.B. "inhalt1", "inhalt2" oder "spalte1", "spalte2 - nummeriert anhand ihrer logischen Abfolge im Quelltext (nicht entsprechend ihrer visuellen Abfolge).

          [1] das kann zb. bei mehrsprachen Seiten der Fall sein, wenn ein ltr und rtl-Schriftsysteme wechseln.

          1. Hallo,

            ich bin die Beispiele von http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout mehrmals durchgegangen. Bei den Beispielen 7-10 hat man bei allen das Problem, dass die Trennlinie, die die beiden Spalten trennt, nicht mehr durchgängig ist, sobald in der linken Spalte weniger Text vorhanden ist als in der rechten. Wie lässt sich das beheben?

            Grüße,
            Thomas

            1. Hallo,

              ich bin die Beispiele von http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout mehrmals durchgegangen. Bei den Beispielen 7-10 hat man bei allen das Problem, dass die Trennlinie, die die beiden Spalten trennt, nicht mehr durchgängig ist, sobald in der linken Spalte weniger Text vorhanden ist als in der rechten. Wie lässt sich das beheben?

              Durch Workarounds ala Faux Columns. Eine Hintergrundgrafik im umgebenden Container.

              --
              "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
                    - T. Pratchett