div problem :-/

[Till]

Hallo

Ich möchte soetwas haben:
+-------+-----------------+
|       | Titel           |
| Image | Text Text Text. |
|       |                 |
+-------+-----------------+

Ich hab es so versucht:
<div style="float:left">
 <img src="foobar" />
</div>
<div style="clear: right;">
 <b>Titel</b><br />
 Text Text Text.
</div>

Aber wenn ich das gleich darunter stecke rutscht der Text-Kontainer unter den anderen also das die quasie verschmelzen:
+-------+-----------------+
|       | Titel           |
| Image | Text Text Text. |
|       | Titel           |
+-------+ Text Text Text. |
|       |                 |
| Image |                 |
|       |                 |
+-------+-----------------+

Kann mir jemand sagen wie ich das lösen kann?
Ich wäre ihm sehr dankbar!

mfg Till

[Frank Opper]

Hallo Till,

Kann mir jemand sagen wie ich das lösen kann?

Indem Du dazwischen z.B. einen leeren Container einfügst, der die Eigenschaft clear: left hat.

clear: right im zweiten <div> ist meines Erachtens überflüssig, da kein Element nach rechts gefloatet ist.

Viele Grüße
Frank

[Till]

Danke euch beiden : )

PS: Klar, ist alles W3C valid später ^^

[Tobias Kloth]

Hallo Till,

Ich hab es so versucht:
<div style="float:left">

für was ist der Container?

<img src="foobar" />

aber ein alt-Attribut bekommt das Bild schon noch, gell? :-)

<b>Titel</b><br />

warum nimmst du für einen Titel kein hx-Element?

Kann mir jemand sagen wie ich das lösen kann?

indem du den Bildern (bzw. dem zweiten) ein clear:both; verpasst, etwa so:

<img src="foo" style="float:left;" alt="foo" />
 <h2>Titel</h2>
 <p>text text text</p>

<img src="foobar" style="float:left; clear:both;" alt="foobar" />
 <h2>Titel</h2>
 <p>text text text</p>

Grüße aus Nürnberg
Tobias