Thomas: CSS Layout mit hilfe von Float

SELF-Forum

CSS Layout mit hilfe von Float

Thomas
– Informationen zu den Bewertungsregeln

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

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. CSS Layout mit hilfe von Float

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln
    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.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. CSS Layout mit hilfe von Float

      Thomas
      – Informationen zu den Bewertungsregeln

      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

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. CSS Layout mit hilfe von Float

        Thomas
        – Informationen zu den Bewertungsregeln

        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>

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. CSS Layout mit hilfe von Float

          suit Homepage des Autors
          – Informationen zu den Bewertungsregeln

          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.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. CSS Layout mit hilfe von Float

            Thomas
            – Informationen zu den Bewertungsregeln

            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

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. CSS Layout mit hilfe von Float

              Steel
              – Informationen zu den Bewertungsregeln

              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
              Beitrag melden
              –
              Informationen zu den Bewertungsregeln