float setzt meine background-Angabe außer Gefecht
Palme
- css
0 MudGuard0 Palme0 MudGuard0 Ingo Turski
0 Cyx23
Hallo,
habe ein mir neues Problem entdeckt:
Ich habe ein div, welches eine background-Farbe zugeteilt bekommen hat.
In diesem div habe ich 2 weitere div's, mit jeweils einer float:left-Angabe.
Diese float-Angabe sorgen dafür, dass meine Hintergrundfarbe nicht mehr zu sehen ist, also alles weiß ist. Nehme ich die float's heraus, klappt es.
Nehme ich bei einem der divs das float heraus, ist halt dieses eine div mit Hintergrundfarbe usw.
Das macht nicht nur der IE so, sondern auch die anderen Browser, also liegt der Fehler wohl bei mir?
Hab mal den Quelltext hier:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>xy</title>
<style type="text/css">
<!--
#content { background:#eeeee7; border-top:1px solid #BEBEA5; margin:0px; text-align:left; padding:20px;}
#content a { color:#b06030; }
-->
</style>
</head>
<body>
<div id="content"><!--content-->
Text oder sonst was
<div style="float:left; margin-right:50px; margin-top:30px;">
1. div
</div>
<div style="float:left; margin-top:30px;">
2. div
</div>
</div><!--content-->
</body>
</html>
Kann mir jemand helfen?
Grüße
Palme
Hi,
Diese float-Angabe sorgen dafür, dass meine Hintergrundfarbe nicht mehr zu sehen ist, also alles weiß ist. Nehme ich die float's heraus, klappt es.
Nehme ich bei einem der divs das float heraus, ist halt dieses eine div mit Hintergrundfarbe usw.
Klar, durch das float beeinflussen die divs die Größe des äußeren div nicht mehr.
Also ist da auch keine Hintergrundfarbe, denn das äußere div enthält ja nichts, hat also eine Höhe von 0.
Setze für die einzelnen divs verschiedenfarbige border und Du wirst es sehen...
Abhilfe: setze vor das Ende des äußeren div etwas, was clear:both oder clear:left hat - z.B. ein br-Element.
cu,
Andreas
Hallo,
ersteinmal Danke! Es klappt jetzt!
Klar, durch das float beeinflussen die divs die Größe des äußeren div nicht mehr.
Das verstehe ich leider nicht ganz, diese divs liegen doch in dem äußeren div, also müßten Sie doch die Größe auch beeinflussen.
Das wäre doch sonst so, als würde ich in einen Luftballon zwei kleine Luftballons stecken, welche mit Wasser gefüllt sind, aber der Luftballon, in welchen ich die anderen 2 reinstecke, wird nicht größer?!
Oder verstehe ich etwas grundlegendes falsch?
Grüße
Palme
Hi,
Klar, durch das float beeinflussen die divs die Größe des äußeren div nicht mehr.
Das verstehe ich leider nicht ganz, diese divs liegen doch in dem äußeren div, also müßten Sie doch die Größe auch beeinflussen.
Das wäre doch sonst so, als würde ich in einen Luftballon zwei kleine Luftballons stecken, welche mit Wasser gefüllt sind, aber der Luftballon, in welchen ich die anderen 2 reinstecke, wird nicht größer?!
Oder verstehe ich etwas grundlegendes falsch?
Lies Dir einfach mal das Kapitel in CSS zu float durch. http://www.w3.org/TR/REC-CSS2/visuren.html#floats
Da ist das schön mit Bildchen erklärt.
cu,
Andreas
Hi,
Das verstehe ich leider nicht ganz, diese divs liegen doch in dem äußeren div, also müßten Sie doch die Größe auch beeinflussen.
nein, da sie durch float aus dem textfluß genommen werden.
Das wäre doch sonst so, als würde ich in einen Luftballon zwei kleine Luftballons stecken,
aber zwei Luftballons, die hypothetisch die Fähigkeit haben, durch feste Materie zu gehen ..;-)
freundliche Grüße
Ingo
Hallo,
#content wird erstmal nicht "unnötig" gross.
So lässt sich da nachhelfen:
<br style="clear:both">
</div><!--content-->
</body>
Und beim IE kann es Vorteile haben beim 2. div auf float zu verzichten, musst du mal testen.
Grüsse
Cyx23