# Wie nach Bilder (align left) mit Text wieder unter dem Bild anfangen



## tuto1812 (3. Oktober 2010)

Huhu, 

ich verzweifle an dem Versuch, einen neuen Textabsatz wieder ganz links unter einem Bild anfangen zu lassen. Das Bild steht links, rechts daneben ist Text. Nun kommt ein neuer Absatz, der soll aber wieder unabhängig von der Textlänge darüber ganz links unter dem Bild anfangen. 

Beispiel siehe: http://www.antarcon.de Die Überschrift "Wandern und Mountainbikefahren ..." nach der Google Landkarte.

ICh könnte wohl einfach leere Absätze einbauen, aber das kann ja je nach Browser unterschiedlich sein. Ich dachte das würde mit einem DIV bzw. float gehen. Aber ich schaffe es einfach nicht. Hat mir wer einen Tipp?


----------



## tuto1812 (3. Oktober 2010)

Hier ein Screenshot mit dem Beispiel. Die H3 Überschrift "Wichtige ..." soll trotz des kurzen Textes darüber wieder links *unter* dem Bilde anfangen.


----------



## Spelmann (3. Oktober 2010)

> Die H3 Überschrift "Wichtige ..." soll ... links unter dem Bilde anfangen.


Im Quelltext steht die Überschrift noch vor dem Bild. Beides erst mal tauschen.
Wenn die Überschrift dann immer noch rechts vom Bild steht weil weil gefloatet wird, könnte Dir mit _clear:left_ geholfen werden.


----------



## SpiceLab (3. Oktober 2010)

Spelmann hat gesagt.:


> Wenn die Überschrift dann immer noch rechts vom Bild steht weil weil gefloatet wird, könnte Dir mit _clear:left_ geholfen werden.


Nicht könnte, sondern wird.


```
#content h3 {
	color: ##663300;
	font-size: 15px;
	font-family: Helvetica, Arial, Verdana, Sans-Serif;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: 120%;
	border-bottom: 1px solid #cccccc;
	clear: left; /* bricht den Umfluß ab */
	}
```
Siehe hierzu auch clear (Fortsetzung bei Textumfluss).


----------



## tsbmusic (3. Oktober 2010)

Oder du machst nach dem Bild einfach ein br mit clear="both" rein.


```
<br clear="both" />
```

Gruss
tsbmusic


----------



## tuto1812 (3. Oktober 2010)

Vielen Dank. Nun bin ich einen Schritt weiter. Besonders die Idee, mit dem 	


```
<br clear="both" />
```

ist klasse. Das funktioniert für das gesamte Dokument einwandfrei. Ok, dabei muss ich dann jedesmal beim Text schreiben daran denken, es im Bedarfsfall einzufügen. 

Also denke ich, ich gehe lieber den Weg und hänge das 'clear' an den H3 Tag.


```
#content h3 {
	clear: both;
	color: ##663300;
    ...
```

Wenn ich das mache kommt das seltsame Phänomen, dass plötzlich ein Riesenabstand vor der H3 Überschrift vom Absatz davor auftaucht. Keine Ahnung wie das zusammenhängt?

=> hier im Original 
oder
ein Screenshot


----------



## SpiceLab (3. Oktober 2010)

Wenn du für die beiden äußeren Spaltenblöcke eine Hintergrundfarbe oder einen Rahmen definierst, erkennst du deutlich den Zusammenhang, dass der Block unterhalb ihres unteren Boxenrandes ausgerichtet wird, so wie es die *clear*-Eigenschaft gebietet ;-)

Du wendest diese Eigenschaft innerhalb eines umfliessenden Blocks an, der sich nicht in seinem normalen Textfluß befindet, und die Browser orientieren sich folglich an den beiden benachbarten Blöcken *#l_sidebar* und *#r_sidebar*, die jeweils mit *float:left* u. *float:right* formatiert sind.

Lösung: *#content* anstelle der margin-Regeln ebenso mit einer float-Regel aus dem normalen Textfluß nehmen.


----------



## Spelmann (3. Oktober 2010)

Ich vermute mal die feste Höhe von _#r_sidebar_ verschiebt den Absatz "Ausdehnung / Lage" nach unten

Ah. Zu langsam. _Siehe spicelab_


----------



## SpiceLab (3. Oktober 2010)

Dieses Bild sagt mehr als tausend Worte ;-)




Die quietschbunten Farben in der linken Spalte stammen nicht von mir, sondern von Firebug, wenn im Markup ein Element markiert o. überfahren wird.


----------



## tuto1812 (4. Oktober 2010)

Super es klappt. Das 'Firebug' Addon ist echt klasse. Es hat mir sehr geholfen, das ganze visuell zu verstehen und ist klasse um die Einstellungen und Auswirkungen genauer zu analysieren.

Nachdem ich die Antwort gestern Abend las, dachte ich "das verstehe ich nie". Da musste ich erst einmal drüber schlafen. Ich habe mir dann nochmal eine kleine Testseite mit drei Farbblöcken und ein wenig Inhalt gebastelt um die Tipps nachzuvollziehen und denke nun, ich habe die Float Geschichte ein wenig mehr verstanden.

Als Ergebnis habe ich wie vorgeschlagen:

Beim mittleren Content Bereich den 'margin-left' gelöscht und dafür an den Content Bereich ein 'float left' drangemacht.


```
#content { 
        float: left;
/*	margin-left: 233px;  */
	width: 440px; 
        ...
```

Nun kann ich an den H3 Tag den 'clear' dran hängen und dieser setzt den Text richtig nach links an den Rand vom Content:


```
#content h3 {
	clear: both;
        ...
```

Es lag also quasi an der (fehlenden) Verschachtelung der Floats? Der Text um das Bild herum ist quasi auch ein Float, aber damit das 'clear' klappt, muss auch irgendwie definiert sein, wohin er zurück gehen soll. Ich meine es einigermaßen kapiert zu haben ... aber tue mir wohl noch schwer, es jemandem zu erklären.

@spicelab: Danke für die anschauliche Erklärung


----------



## SpiceLab (4. Oktober 2010)

Kein Ding, ist gern geschehen, und um das Verständnis noch ein wenig zu vertiefen: Float: Die Theorie


----------

