CSS (float) abhängig von Reihenfolge des HTML-Codes (div)

[BB-BF-BM]

Hallo!

Mit gegebenem HTML-Code

Code: Alles auswählen

<div id="wrapper">
	<div id="navi">
		<h2>Navigation</h2>
	</div>

	<div id="boxes">
		<h2>Weitere Boxen</h2>
		<p>Zum Beispiel Tagcloud, Partnerseiten, Werbung, ...</p>
	</div>

	<div id="content">
		<h2>Inhalt</h2>
		<p>Lorem ipsum dolor sit amet, ...</p>
	</div>
</div>

und gegebenem CSS-Code

Code: Alles auswählen

#wrapper
{
	max-width: 40em;
}

#navi
{
	float: left;
	width: 10em;
	border: 1px solid #0000FF;
}

#boxes
{
	float: right;
	width: 10em;
	border: 1px solid #00FF00;
}

#content
{
	width: 30em;
	margin: 0 auto;
	border: 1px solid #FF0000;
}

erhält man (zumindest im Firefox) folgendes Ergebnis: Screenshot 1


Nun würde ich gerne die Reihenfolge der div-Container im HTML-Code ändern:

Code: Alles auswählen

<div id="wrapper">
	<div id="navi">
		<h2>Navigation</h2>
	</div>

	<div id="content">
		<h2>Inhalt</h2>
		<p>Lorem ipsum dolor sit amet, ...</p>
	</div>

	<div id="boxes">
		<h2>Weitere Boxen</h2>
		<p>Zum Beispiel Tagcloud, Partnerseiten, Werbung, ...</p>
	</div>
</div>

Bleibt der CSS-Code der gleiche, ändert sich das Resultat: Screenshot 2


Hat jemand eine Anregung, mit welchem CSS-Code trotz veränderter Reihenfolge ein fast identisches Bild wie im ersten Screenshot erreicht werden kann?

Wichtig ist dabei, dass der Text sich nicht überlagert. Dies geschieht beispielsweise bei absoluter Positionierung wie in folgendem CSS-Code

Code: Alles auswählen

#wrapper
{
	max-width: 40em;
	position: relative;
}

#navi
{
	float: left;
	width: 10em;
	border: 1px solid #0000FF;
}

#boxes
{
	position: absolute;
	top: 0;
	right: 0;
	width: 10em;
	border: 1px solid #00FF00;
}

#content
{
	width: 30em;
	margin: 0 auto;
	border: 1px solid #FF0000;
}

Das führt zu folgender Darstellung: Screenshot 3

[gn#36]

Hm die Reihenfolge des Quellcodes ist für die Darstellung unglücklicherweise nicht völlig egal. Ich bin zwar kein CSS Profi, aber viel mehr Versionen als die die du hast dürfte es nicht geben, es sei denn du packst ein leeres Element per float oben in die Ecke das exakt den Abmessungen entspricht die das Textelement braucht und legst dann den tatsächlichen Text mit deiner dritten Version per position: absolute genau oben drüber, dann sorgt das floatende, leere Element dafür dass der Text umflossen wird, dein Textelement selbst ist aber dahinter. Einen Vorteil gegenüber Version 1 sehe ich da allerdings nicht, im Gegenteil das dürfte viel Problematischer zu handlen sein wenn die Größe der Box nicht feststeht weil der Text sich ändert. Ansonsten bleibt nur den Textflussbereich schmaler zu machen denke ich, es sei denn per JavaScript lässt sich was drehen (davon würde ich beim Styling allerdings eher abraten, das funktioniert nicht unbedingt immer so gut wie es soll). Eine Kombination aus "text verdrängen" und "absolute position" ist mir nicht bekannt (sowas wie float: center fände ich auch nett).

[piero]

kleine frage...

wäre es nicht besser, wenn der text immer gleichbreit bleibt?
weil wenn der unten so auseinanderfällt, sieht das (für mich) etwas komisch aus...^^
Bild

mit genau den vorgaben konnte ich nach ~0.5h auch nix rechtes machen :/

[BB-BF-BM]

Hallo!

Nein, der Text soll wieder eine gewohnte Zeilenlänge haben, sobald keine Box mehr den Textfluss stört. Der Grund, weshalb die Boxen den Text verdrängen sollen, liegt darin, dass auch bei schmalem Browserfenster die Seite gut zu erfassen ist.

gn#36: Vielen Dank für deine ausführlichere Erläuterung; so etwas habe ich schon befürchtet.

[piero]

ich hätte das dann lieber oberhalb/unterhalb vom text, ist aber geschmackssache

wenn dir die reihenfolge so wichtg ist, kannst du sonst auch die daten im xml-format bereitstellen. das kannst du dann mittels xsl (extensible stylesheet language) zu html umschreiben (und mit css stylen, usw.).

suchmaschinen, bots, etc. verarbeiten (soweit ich weiss) den xsl-code nicht, und sehen dann nur die xml-daten in deiner gewünschten abfolge