Text floaten über Spalten

[Tom]

Hello,

kann man mit HTML5 eigentlich direkt einen Text automatisch floaten über mehrere Spalten (DIVs) mit festgelegter Höhe? Also wenn DIV_1 voll, automatisch in DIV_2 weiterschreiben, usw.

Mit JavaScript hatte ich das schon mal am Wickel, kann es aber leider nicht wiederfinden in meiner Sammelkiste.

Irgendwie ging das mit Vergleich von scrollHeight und clientHeigt.

Bevor ich jetzt nochmal anfange, das zusammenzustoppeln, die Frage nach den Möglichkeiten von HTML5

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[JürgenB]

Hallo Tom,

hast du schon mal column-count und column-gap ausprobiert?

Gruß, Jürgen

[Tom]

Hello,

Hallo Tom,

hast du schon mal column-count und column-gap ausprobiert?

Sehr guter Tipp! Danke.

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_column-gap

Selbst text-align:justify; funktioniert da noch.

Jetzt muss ich nur mal sehen, welche Browser das noch nicht konnten und wie wichtig die noch sind für die kleine Online-Zeitung.

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg

[JürgenB]

Hallo Tom,

bei mir sieht das so aus:

  
@media screen and (min-width:50em) {  
  .mc {    -moz-column-count:2;    -moz-column-gap:1.5em;  
        -webkit-column-count:2; -webkit-column-gap:1.5em;  
                column-count:2;         column-gap:1.5em; }  
}  

Browser, die das nicht verstehen, zeigen den Inhalt einspaltig an.

Gruß, Jürgen

[Tom]

Hello Jürgen,

bei mir sieht das so aus:

@media screen and (min-width:50em) {
  .mc {    -moz-column-count:2;    -moz-column-gap:1.5em;
        -webkit-column-count:2; -webkit-column-gap:1.5em;
                column-count:2;         column-gap:1.5em; }
}

>   
> Browser, die das nicht verstehen, zeigen den Inhalt einspaltig an.  
  
Ich hab nur noch ein paar Probleme mit Bildern in den Spalten. Die Breite klappt, aber wiesi h die Höhe ergibt,  bzw. sich in den Fluss einbrkngt, kapier ich noch nicht.  
  
  
Liebe Grüße aus dem schönen Oberharz  
  
  
Tom vom Berg  
![](http://selfhtml.bitworks.de/Virencheck.gif)  
  

-- 
 ☻\_  
/▌  
/ \ Nur selber lernen macht schlau  
[Die ultimative Seite für Selbermacher](http://getscript.de/)

[Matthias Apsel]

Om nah hoo pez nyeetz, Tom!

hast du schon mal column-count und column-gap ausprobiert?

Sehr guter Tipp! Danke.

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_column-gap

Selbst text-align:justify; funktioniert da noch.

Spalten gibts auch bei uns wiki. Sogar recht einfach zu finden: Startseite → CSS-Eigenschaften → Spalten: column-…

Protipp: Blocksatz nur mit Silbentrennung (hyphens, gibts auch im wiki)

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Protipp: Blocksatz nur mit Silbentrennung (hyphens, gibts auch im wiki)

Heißt: Nur mit Modernizr (o.ä. feature detection). Und Abfrage, ob auch die Textsprache angegeben wurde.

Oder besser auf Blocksatz ganz verzichten. Web! = Print.

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Gunnar Bittersmann!

Und Abfrage, ob auch die Textsprache angegeben wurde.

Braucht man imho nicht. Wenn das lang-Attribut fehlt, arbeitet hyphens nicht. Zumindest im FF.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Und Abfrage, ob auch die Textsprache angegeben wurde.

Braucht man imho nicht. Wenn das lang-Attribut fehlt, arbeitet hyphens nicht. Zumindest im FF.

Eben!

Wenn die Sprache nicht angegeben ist und hyphens nicht arbeitet, sollte kein Blocksatz verwendet werden. (Zumindest nicht für Deutsch.)

Qapla'

[Tom]

Hello,

wir kann ich das besser zusammenfassen?

Muss ich wirklic zweimal "@media screen" schreiben?

Kann ich nicht auch direkt auf min-width prüfen?
Wo find ich 'was über diese Möglichkeiten?

  
	  
div.content {  
    padding:20px;  
}			  
  
div.content p:first-child {  
    margin-top:0;  
}		  
  
@media screen and (min-width:40em) {  
    div.content {  
        -moz-column-count:2;  
        -moz-column-gap:1.0em;  
        -webkit-column-count:2;  
        -webkit-column-gap:1.0em;  
        column-count:2;  
	column-gap:1.0em;  
    }	  
}  
  
@media screen and (min-width:60em) {  
    div.content {  
        -moz-column-count:3;  
        -moz-column-gap:1.0em;  
        -webkit-column-count:3;  
        -webkit-column-gap:1.0em;  
        column-count:3;  
        column-gap:1.0em;  
    }	  
}	  
  

Liebe Grüße aus dem schönen Oberharz

Tom vom Berg