nicht angemeldet
Float-Divs sprengen Design
Hallo Leute,
ich habe eine Frage zu float:
In einem Container-Div, der die Hintergrundfarbe definiert, liegen zwei Divs, die beide float: left ausgezeichnet sind.
<div id="container" style="width: 600px; background: #CCCCCC;">
<div id="links" style="float: left; width: 400px;">Text1</div>
<div id="rechts" style="float: left; width: 200px;">Text2</div>
</div>
Nun dachte ich mir, daß der Container-Div sich in der Höhe den Kind-Divs anpasst, aber das funktioniert nicht, die Hintergrundfarbe wird gar nicht dargestellt, weil der Container-Div keine Höhe hat.
Was kann man hier tun?
-
hi,
Nun dachte ich mir, daß der Container-Div sich in der Höhe den Kind-Divs anpasst, aber das funktioniert nicht, die Hintergrundfarbe wird gar nicht dargestellt, weil der Container-Div keine Höhe hat.
Ja, genau - weil du mittels float ja beide Kindelemente aus dem Fluss genommen hast, wirkt sich ihre Höhe nicht mehr auf die des umgebenden Containers aus.
Was kann man hier tun?
Float verstehen.
Und dann entweder den Container selbst ebenfalls floaten,
oder nach den beiden gefloateten ein clearendes Element einfügen,
oder die Wunderwaffe overflow abfeuern.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; } -
Moin
Die Lösung steht hier:
https://forum.selfhtml.org/?t=143417&m=931295Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <- -
Hallo,
Nun dachte ich mir, daß der Container-Div sich in der Höhe den Kind-Divs anpasst, aber das funktioniert nicht, die Hintergrundfarbe wird gar nicht dargestellt, weil der Container-Div keine Höhe hat.
Nein, du nimmst die <div>s mit float aus den Elementfluss. Um den von dir gewünschten Effekt zu erreichen, gibt es mehrere Möglichkeiten:
1. Nur CSS, läuft aber nicht im IE
#container:after {content:""; display:block; clear:left;}2. ebenfalls nur CSS, sollte auch im IE laufen, verursucht aber teilweise andere Probleme:
#container {overflow:hidden;} * html #container {height:1px;}3. zusätzliches HTML:
füge am Ende des Containers ein clearendes <div> ein:
<div style="clear:left;"></div>Fall der IE bei dir ohnehin schon richtig rät, würde ich zur 1. Möglichkeit greifen. Ansonsten musst du halt die beiden Anderen mal ausprobieren.
mfg. Daniel