Linuchs: ::after und clear:both

Hallo,

ich habe - vergleichbar mit einem Zeitungsartikel - oft zwei Spalten fließend nebeneinander. Nach der rechten Spalte soll der Fluss abgeschlossen sein.

Bisher setzte ich dort <div class=clear></div> wobei clear = clear:both;

Theoretisch sollte es aber doch auch ohne HTML gehen mit ::after. Das tut aber nicht.

div.inhalt div:nth-of-type(1) {  
  width: 48%;  
  float: left;  
}  
div.inhalt div:nth-of-type(2) {  
  width: 48%;  
  float: right;  
}  
div.inhalt div:nth-of-type(2)::after {  
  content: " ";  
  clear: both;  
}  

<div class=inhalt>  
  <h3>ABCDE</h3>  
<div>  
  <p>A long time ago / De Hoffnung <i>Halyard Sh.</i></p><p><a href="#lied_01">1</a></p>  
  <p>A roving maid <i>Pump, Capstan Sh.</i></p><p><a href="#lied_11">11</a></p>  
</div>  
<div>  
  <p>Alabama John Cherokee</p><p><a href="#lied_64"><b class=neu>64</b></a></p>  
</div>  
</div>  
  
<div class=inhalt>  
  <h3>FGHIJ</h3>  
  <p>Fire down below</p><p><a href="#lied_32">32</a></p>  

Zu erwarten wäre, dass FGHIJ in einer neuen Zeile beginnt, es steht aber unter "Alabama John Cherokee".

Was mache ich falsch?

Linuchs

  1. Om nah hoo pez nyeetz, Linuchs!

    Zu erwarten wäre, dass FGHIJ in einer neuen Zeile beginnt, es steht aber unter "Alabama John Cherokee".

    Was mache ich falsch?

    So wie ich das auf die Schnelle überblicke möchtest du .inhalt clearen.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Inge und Ingenieur.

    1. So wie ich das auf die Schnelle überblicke möchtest du .inhalt clearen.

      Hallo Matthias,

      Nein, .inhalt umschliesst die beiden Spalten und floatet selbst nicht. Habe deinen Vorschlag dennoch ausprobiert. Wie erwartet, fruchtet das clear:both; natürlich nicht.

      Habe mal für das Beispiel eine Extra-Datei gemacht, um evtl. andere Störgrößen rauszunehmen:

      <html>  
      <head>  
      <meta http-equiv="content-type"  content="text/html;charset=UTF-8">  
        
      <style type="text/css">  
      div.inhalt div:nth-of-type(1) {  
        width: 48%;  
        float: left;  
      }  
      div.inhalt div:nth-of-type(2) {  
        width: 48%;  
        float: right;  
      }  
      /* clear mit CSS:  
      div.inhalt div:nth-of-type(2)::after {  
        content: " ";  
        clear: both;  
      }  */  
      /* clear mit HTML: */  
      .clear {  
        clear: both;  
      }  
      </style>  
      </head>  
        
      <body>  
      <div class=inhalt>  
        <h3>1. Überschrift</h3>  
        <div>  
          <p>Links 1. Absatz</p>  
          <p>Links 2. Absatz</p>  
          <p>Links 3. Absatz</p>  
          <p>Links 4. Absatz</p>  
        </div>  
        <div>  
          <p>Rechts 1. Absatz</p>  
          <p>Rechts 2. Absatz</p>  
        </div>  
        <p class=clear></p>  
      </div>  
        
      <div class=inhalt>  
        <h3>2. Überschrift</h3>  
        <div>  
          <p>Links 1. Absatz</p>  
          <p>Links 2. Absatz</p>  
          <p>Links 3. Absatz</p>  
          <p>Links 4. Absatz</p>  
        </div>  
        <div>  
          <p>Rechts 1. Absatz</p>  
          <p>Rechts 2. Absatz</p>  
        </div>  
        <p class=clear></p>  
      </div>  
      </body>  
        
      </html>  
      
      

      Bei der HTML-Variante sieht es wie gewünscht aus. .inhalt wird auber abgeschlossen und 2. Überschrift belegt eine neue Zeile.

      Jetzt wechsle ich CSS auf

      /* clear mit CSS:  */  
      div.inhalt div:nth-of-type(2)::after {  
        content: " ";  
        clear: both;  
      }  
      /* clear mit HTML:  
      .clear {  
        clear: both;  
      }  */  
      
      

      und "2. Überschrift" steht rechts neben "Links 3. Absatz", clear fruchtet also nicht. In den gefundenen Bespielen hat content: "xxx"; immer einen Wert. Aber daran liegt es aiuch nicht.

      Linuchs

      1. @@Linuchs:

        nuqneH

        So wie ich das auf die Schnelle überblicke möchtest du .inhalt clearen.
        Nein,

        Doch. Oh!

        Habe deinen Vorschlag dennoch ausprobiert. Wie erwartet, fruchtet das clear:both; natürlich nicht.

        Dann hast du was falsch gemacht.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Dann hast du was falsch gemacht.

          Offenbar:

          div.inhalt:after {  
            clear: both;  
          }
          

          Ohne after geht's:

          div.inhalt {  
            clear: both;  
          }
          

          Oder auch mit

          div.inhalt {  
            overflow: hidden;  
          }
          

          da stmmen sogar die Abstände zwischen den Absätzen.

          Linuchs

  2. Om nah hoo pez nyeetz, Linuchs!

    div.inhalt div:nth-of-type(1) {

    width: 48%;
      float: left;
    }
    div.inhalt div:nth-of-type(2) {
      width: 48%;
      float: right;
    }

      
    Das geht auch kürzer:  
    ~~~css
    div.inhalt > div {  
        width: 48%;  
        float: right;  
    }  
    div.inhalt > div:first-of-type {  
        float: left;  
    }
    

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Bor und Borg.

  3. @@Linuchs:

    nuqneH

    Was mache ich falsch?

    1. Du hast kein Online-Beispiel erstellt.

    2. columns kennst du?

    3. div.inhalt jeweils mit h3 beginnend sind ein Indiz dafür, dass die div lieber section wären.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. Om nah hoo pez nyeetz, Gunnar Bittersmann!

      1. columns kennst du?

      Columns ist dafür imho nicht sonderlich gut geeignet. Das geht immer nur dann, wenn man auf die konkrete Befüllung der Spalten keinen Einfluss nehmen möchte, wie bei einem Zeitungsartikel.

      Es sei denn, es hat sich in der Zwischenzeit was entscheidendes getan.

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Gummi und Gummibärchen.

      1. @@Matthias Apsel:

        nuqneH

        Columns ist dafür imho nicht sonderlich gut geeignet. Das geht immer nur dann, wenn man auf die konkrete Befüllung der Spalten keinen Einfluss nehmen möchte, wie bei einem Zeitungsartikel.

        Es sei denn, es hat sich in der Zwischenzeit was entscheidendes getan.

        break-inside?

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Om nah hoo pez nyeetz, Gunnar Bittersmann!

          Es sei denn, es hat sich in der Zwischenzeit was entscheidendes getan.
          break-inside?

          Ja, aber http://caniuse.com/#feat=multicolumn

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Don und Donald Duck.

          1. @@Matthias Apsel:

            nuqneH

            Ja, aber http://caniuse.com/#feat=multicolumn

            Grün soweit das Auge reicht.

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  4. Hi,

    div.inhalt div:nth-of-type(2)::after {

    content: " ";
      clear: both;
    }

      
    
    > Was mache ich falsch?  
      
    <http://www.w3.org/TR/CSS21/visuren.html#flow-control>, “Applies to:”  
      
    RTFSpecs. Nächstes mal bitte auch gerne, bevor du fragst …  
      
    MfG ChrisB  
      
    
    -- 
    You shouldn’t do ASCII art any more … use UTF-8, goddammit!
    
    1. @@ChrisB:

      nuqneH

      http://www.w3.org/TR/CSS21/visuren.html#flow-control, “Applies to:”

      RTFSpecs. Nächstes mal bitte auch gerne, bevor du fragst …

      Und inwiefern würde display: block das Problem lösen?

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. Hi,

        Und inwiefern würde display: block das Problem lösen?

        Das sollte eigentlich hier drunter: https://forum.selfhtml.org/?t=219490&m=1516190

        MfG ChrisB

        --
        You shouldn’t do ASCII art any more … use UTF-8, goddammit!