Frage zu CSS: floats überlappen einander

[nocte]

Ich habe mit Bootstrap ein Layout erstellt.

Das ganze ist in einem ".well" Container. Darin befinden sich einige Divs der Klasse ".box". Rechts sollte ein Bild erscheinen - umgeben von einem Div der Klasse ".profil-thumb". Das ganze soll so aussehen:

Code: Alles auswählen

+------------------+ +--------+
|      DIV1        | |        |
|                  | |        |
+------------------+ |  BILD  |
+------------------+ |        |
|      DIV2        | |        |
|                  | +--------+
+------------------+
+-----------------------------+
|            DIV3             |
|                             |
+-----------------------------+

das html sieht (vereinfacht) so aus:

Code: Alles auswählen

<div class="profil-thumb">
	<!-- Bild -->
</div>

<div class="box">
	<!-- Div1 -->
</div>

<div class="box">
	<!-- Div2 -->
</div>

<div class="box">
	<!-- Div3 -->
</div>

und das CSS:

Code: Alles auswählen

.box {
	border: 1px solid #999;
	padding: 10px;
	margin-top: 20px;
}
.profil-thumbs {
	float: right;
	margin-left: 20px;
}

Leider überlappt bei diesem Code das Bild einfach die Boxen, d.h. die boxen laufen unter dem Bild bis zum rechten Rand weiter.

ich hoffe ich konnte mich einigermaßen verständlich ausdrücken. Kann jemand helfen?

nocte

[dropsi]

Floate div 1 und 2 mit left und gib am besten noch die Breite dazu an - dann sollte alles passen.

[pimpi]

Ich würde div1 und div2 ebenso floaten, danach kommt ein clearer für den Footer.

[nocte]

Das Problem ist, dass die Höhe der Divs und der Thumbnails variabel ist, d.h. es kann auch sein, dass schon Div1 höher als das Bild ist oder umgekehrt mehrere Bilder angegeben werden.

[Melegrian]

Lasse doch in diesem Fall den ersten und zweiten Text einfach laufen, dann passt der Inhalt sich doch von allein an. Und statt ein Bild passen da auch mehrere Bilder zwischen Div und /Div hinein.

Code: Alles auswählen

<div style="float&#58; right; margin&#58; 5px 0px 5px 20px"><img src="Bild.jpg" alt="Text" width="xx0" height="xx0"></div>
<p style="text-align&#58; left">Fließtext 1</p>
<p style="text-align&#58; left">Fließtext 2</p>
<p style="text-align&#58; justify; clear&#58; both">Fließtext 3</p>

+------------------+ +--------+
|      Absatz 1    | |        |
|                  | |        |
+------------------+ |  BILD  |
+------------------+ |        |
|      Absatz 2    | |        |
|                  | +--------+
+------------------+
+-----------------------------+
|          Absatz 3           |
|                             |
+-----------------------------+

Es sei denn Du möchtest Spalten erzwingen, auch wenn der Text oder die Bilder länger sind, dann lege ein "zweispaltiges" Div (2 DIVs) noch einmal darüber oder nehme halt eine Tabelle dafür.

Code: Alles auswählen

+-------------------+---------+
| +---------------+ |+-------+|
| |      Absatz 1 | ||       ||
| |               | ||       ||
| +---------------+ || BILD  ||
| +---------------+ ||       ||
| |      Absatz 2 | ||       ||
| |               | |+-------+|
| +---------------+ |         |
+-------------------+---------+
+-----------------------------+
|            DIV3             |
|                             |
+-----------------------------+