CSS Problem? Text bricht nicht um

**scampi** · 19.02.2014, 17:34

Hi,

ich habe vier divs, also 4 Boxen. Box a und b nebeneinander, darunter Box c und d nebeneinander.
In den Boxen sind noch je eine h2 mit einem Icon davor, darunter steht Text.

Beim Kleinerskalieren des Browserfenster rutschen die Boxen b und d wie gewünscht unter Box a bzw c, aber der Text
wird abgeschnitten, bricht also nicht um. Sobald ich width abstelle, funktioniert der Textumbruch, aber ich habe die Boxen
dann über die ganze Breite untereinander. Wie kann man das lösen?

Code:

#box-a, #box-b, #box-c, #box-d.ce_text {
    float: left;
    margin-left: 20px;
    padding-bottom: 20px;
    width: 440px;
}

Danke im Voraus!

**dackelchen** · 19.02.2014, 17:41

Link zur Seite?

**scampi** · 19.02.2014, 17:46

ist nur lokal

**wulf** · 19.02.2014, 18:01

Was soll das .ce_text ? In deinem CSS-Schnipsel würde es sich nur auf box-d beziehen.
http://codepen.io/anon/pen/kKucJ

**dackelchen** · 19.02.2014, 18:10

mit "width: 440px;" als festem Wert kann das nicht funktionieren. Wenn Text umbrechen soll brauchst Du da eine variable Breite.Aber um wirklich helfen zu können, müßte, zumindest ich, die Seite sehen.

**Rev** · 19.02.2014, 18:20

Hallo

Bitte spezifiziere doch noch mal, was genau du erreichen möchtest. Soll der Text eine maximale oder minimale Breite haben? Wie Edgar schon meint, wäre es gut, das Ganze mal zu sehen. Deine Angabe der CSS-Selektoren verstehe ich nämlich auch nicht so ganz. Vermutlich haben aber alle 4 Boxen die gleiche Klasse, aber unterschiedliche IDs, oder? Davon gehe ich in meinem Code-Schnippsel (unten) einfach mal aus...

Aus dem Bauch heraus vermute ich, dass du den Effekt wünschst, den hier eine max-width-Angabe verursacht. Wenn du dem Inhalt bzw. der Box eine minimale Breite geben musst/möchtest, setze zusätzlich eine min-width-Angabe von z.B. "150px".

Code:

#box-a.ce_text, 
#box-b.ce_text, 
#box-c.ce_text, 
#box-d.ce_text 
 {
  float: left;
  margin: 0px 20px 20px 0px;
  max-width: 440px;
 }

**scampi** · 20.02.2014, 16:06

Hi,

danke für Eure Antworten.

Im Prinzip möchte ich das Verhalten erreichen, wie es die icon divs auf der Startseite von contao.org beim kleiner Skalieren haben.
Text soll umbrechen, Boxen sollen zumindest oben/horizontal auf einer Linie bleiben, bis sie dann bei zu wenig Platz untereinader rutschen.

**scampi** · 20.02.2014, 16:25

Zitat von Rev

Hallo

Aus dem Bauch heraus vermute ich, dass du den Effekt wünschst, den hier eine max-width-Angabe verursacht. Wenn du dem Inhalt bzw. der Box eine minimale Breite geben musst/möchtest, setze zusätzlich eine min-width-Angabe von z.B. "150px".

Code:

#box-a.ce_text, 
#box-b.ce_text, 
#box-c.ce_text, 
#box-d.ce_text 
 {
  float: left;
  margin: 0px 20px 20px 0px;
  max-width: 440px;
 }

Guter Bauch!!! Danke!

Ein Problem ist jetzt noch: Wenn die divs untereinander rutschen, geht der Text nicht über die gesamte zur Verfügung stehenden Breite,
d. h. es ist relativ viel leerer Platz rechts.

**wulf** · 20.02.2014, 16:41

Könnte man mit media-queries lösen, siehe http://codepen.io/anon/pen/kKucJ

**scampi** · 20.02.2014, 20:08

Hi,

danke für den Link, probier ich noch aus, das bei codepen...

@ Rev: Max-width hat das Problem leider doch nicht ganz gelöst. Der Text fängt erst umzubrechen an, wenn Box b und d, also die beiden rechten,
unter die beiden linken (a und c) gerutscht sind.