[CSS] Nerviges Problem mit Positionierung

Druckbare Version

06.10.2010, 20:03
Ranmaru

[CSS] Nerviges Problem mit Positionierung
Ich brauche mal Hilfe. Ich will ein Layout mit dynamischer Breite machen, was folgendermaßen aussieht:

Code:

----------- ----- - A - - B - - - - - - - - - - - ----- - - - - - - -----------

A und B liegen in einem div, das 90% der Gesamtbreite des Browserfensters einnimmt. B ist ein nav-Element, das fix 200px breit ist. A ist ein section-Element mit einer nicht näher definierten Breite, es soll immer exakt so breit sein wie die Breite von dem div minus 200px (die Breite von B), und unter B, welches immer kürzer ist als A, soll dann whitespace sein.
Code (CSS):
```
nav#B {
	width: 200px;
	margin: 20px 10px 10px 30px;
	float: right;
}
```
Mein Problem ist jetzt, natürlich, daß A um B herumfloated, also der Text innerhalb von an nachdem B zuende ist, nicht mehr nur die Gesamtbreite - 200px einnimmt, sondern die volle Breite.

Hat jemand eine Idee, wie man das lösen kann? Und wenn's geht bitte ohne so dreckige Workarounds wie display: inline-table mit width: 100%.

Vielen Dank.
06.10.2010, 21:04
Indy

Du könntest es mit einem equal-heights-Plugin, wie diesem hier für jQuery probieren. Dann hätten die beiden Elemente die selbe Höhe und der Text aus section könnte dann nicht mehr um die nav-Box floaten.
06.10.2010, 22:02
Ranmaru
Ja, an jQuery hatte ich auch schon gedacht, aber ich bevorzuge eine CSS-basierte Lösung. Inzwischen habe ich auch eine gefunden, flexible boxes nämlich. ^^
Code (CSS):
```
div#container {
	display: -webkit-box;
	-webkit-box-align: start;
	-webkit-box-orient: horizontal;
}
 
section#A { -webkit-box-flex: 1; }
 
nav#B {
	-webkit-box-flex: 1;
	min-width: 200px;
	max-width: 200px;
}
```
Das macht alles, was ich will (ist jetzt nur die Webkit-Variante, da fehlt noch der -moz-Kram und das prefixlose).

Danke trotzdem.
06.10.2010, 22:18
Xardas der Dunkle

Geht auch viel einfacher, funktioniert vor allem in jedem Browser:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <title></title> <style type="text/css"> /* <![CDATA[ */ #content { width: 90%; position: relative; } #content_left { position: absolute; top: 0; left: 0; right: 200px; /* !!!! Hier ist der Knackpunkt, das div benötigt eine Positions-Angabe von beiden Seiten !!! */ border: 1px solid #000; } #content_right { position: absolute; top: 0; right: 0; width: 198px; border: 1px solid #000; } /* ]]> */ </style> </head> <body> <div id="content"> <div id="content_left">Hallo Welt</div> <div id="content_right">Test</div> </div> </body> </html>
06.10.2010, 22:26
Ranmaru

Interessant, danke. An absolute innerhalb von relative habe ich nicht gedacht. Wobei das Argument, daß es so in allen Browsern funktioniert, relativ nebensächlich ist. Das Design ist für 'n privates Projekt und ich hab sowieso schon heftig HTML5 und CSS3 benutzt (hsla()-Farben ftw ^^), da macht's dann die flexbox auch nicht mehr aus.
13.10.2010, 13:09
Bluescreen

Du kannst auch einfach im die beiden nebeneinander liegenden Boxen (Rot) position:static lassen (Standard).
Dann in der linken Box (Blau) float:left; und in der rechten Box (Grün) clear:right;. Dann kannst du diese Box per margin-left neben die linke Box schieben.
Auch dabei bleibt der Elementfluss um die rote Box erhalten.

Kompatibel zu allen gängigen Browsern (auch IE6).
15.10.2010, 13:07
dead_orc

Zitat:

Zitat von Bluescreen

Du kannst auch einfach im die beiden nebeneinander liegenden Boxen (Rot) position:static lassen (Standard).
Dann in der linken Box (Blau) float:left; und in der rechten Box (Grün) clear:right;. Dann kannst du diese Box per margin-left neben die linke Box schieben.
Auch dabei bleibt der Elementfluss um die rote Box erhalten.

Kompatibel zu allen gängigen Browsern (auch IE6).

Ich glaube, du hast das Ziel genau umgedreht: Es sollte gerade KEIN Textfluss um die rote Box stattfinden, sondern stattdessen darunter Leerraum sein. Außerdem bringt clear:right; genau gar nichts, wenn vorher kein Element mit float:right; aufgetaucht ist.
16.10.2010, 17:15
DFYX

Uhm, ich weiß jetzt nicht, ob ich das Problem missverstanden hab, aber eigentlich sollte es reichen, A ein margin-right: 200px zu verpassen und den Rest zu lassen, wie er ist.