rechts floatende Box und Ausrichtung von Bildern

[dusticelli]

Hallo Community,

ich bin der Verzweiflung nahe, irgendwie komm ich nicht weiter. Habe auch schon gegoogelt, ohne Erfolg:

In einem Container gibt es 2 Inhalte.
- Text mit Bildern
- eine Box mit Navigationsinhalt

Nun soll die Box in dem Container am rechten Rand stehen, und der Text mit den Bildern dran vorbei fließen.

Die Bilder würde ich am liebsten auch nach Wunsch innerhalb des Textes ausrichten (sollen je nach wunsch rechts/links stehen) und vor allem soll der Text an den Bildern natürlich auch vorbei fließen, damit es keinen unschönen Umbruch gibt.

Dabei (und ich denke das verursacht eigentlich mein Problem) soll sich der Text auch unterhalb der Box auf die gesamte Breite ausdehnen.

Ich habe das jetzt mal gescribbelt, fürs bessere Verständnis



Ich kriege es einfach nicht hin. Wenn ich dem Bild irgendein float gebe, verrutscht es immer unter die Box, oder die Box selbst rutscht unter den Inhalt usw.

So sieht vereinfacht mein html aus:

<div id="wrapper">
  <div id="content">text text <img src="url"> text  text text text
  </div>
  <div id="box"> Box Inhalt</div>
</div>

das css:

...

#content {
width:100%;
}

#box {
float:right;
width:240px;
}

...

Kann mir vielleicht irgendjemand dabei weiterhelfen?

Vorab schon mal Danke für die Mühe.

Gruß aus Köln
dusticelli

 

[Herr_D]

AW: rechts floatende Box und Ausrichtung von Bildern

setz den html-code um

#content {
width:100%;
}

#box {
float:right;
width:240px;

}

#text { angaben}

<div id="content">
<div id="box"> Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt </div>
<div id="text"><img src="bricks.jpg" width="200" height="200" border="0" alt="" style="float:left; margin:0.5em;"> text text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text text   text text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text texttext text text text text text</div>
</div>

und floate dann noch die Bilder

 

[dusticelli]

AW: rechts floatende Box und Ausrichtung von Bildern

Hallo Herr_D,

danke für die Turbo-Antwort.

Das hatte ich auch schon versucht (jetzt nach deinem Post erneut) sorgt bei mir aber dafür, dass das Bild unter die Box rutscht.

Hier kann man das mal im original sehen:



?!

 

[Herr_D]

Bei mir funzt das

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

	<head>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
		<style type="text/css">
<!--
* {
margin:0;
padding:0;
}

body {
height:100%;
width:100%; }

#content {
width:100%;
}

#box {
float:right;
width:240px;

}

#text { angaben}
-->
</style>
	</head>

	<body>
		<div id="wrapper">
			<div id="content">
				<div id="box">
					Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt Box Inhalt</div>
				<div id="text">
					<img style="float:left; margin:0.5em;" src="bricks.jpg" alt="" height="200" width="200" border="0"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text<img style="float:right; margin:0.5em;" src="bricks.jpg" alt="" height="200" width="200" border="0"> text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>
			</div>
		</div>
	</body>

</html>

Du packst das Bild in einen leeren Container... der geht auf 100% breite, dann müßtest du den container floaten (und ihm vor allem eine Breite geben)

 

[dusticelli]

Als Dein geposteter Code macht genau was ich brauche. Wenn ich das aber auf meine Seite umsetzen will, rutscht das Foto sobald es ein float von mir bekommt immer unter die Box.

...der geht auf 100% breite, dann müßtest du den container floaten (und ihm vor allem eine Breite geben)

welchen Container meinst Du hier?

So, habe die Ursache schon mal gefunden. In meiner Seite gibt es unterhalb der Box noch einen Container der als spacer dient. Dieser ist quasi unsichtbar (leer) und hat die selbe Breite wie die Box und eine Höhe von 20px. Dies soll den Abstand zu unteren Elementen herstellen, da ich aufgrund eines "sticky footers" keine margins verwenden kann.

Damit nun diese 2.te spacer-box nicht neben die eigentliche Box floatet habe ich ihr ein clear:right; vorangestellt.

Wenn ich dieses "clear" nun entferne klappts mit dem Bild, aber die Spacer-box rutscht nun links neben die Box (floatet also) und erfüllt nicht mehr ihren Zweck.

Eine Lösung wäre es wohl die beiden Boxen (also Box und Spacer-Box) in einen Wrap zu packen, dann sollte es gehen, oder?!

Gesagt - Getan!

Hat funktioniert.
Vielen Dank nochmal für die Anteilnahme.