float over background color mystery....

liunx

Guest
I just noticed a strange behaviour which got me stuck almost 30 minutes.

I just wraped around a floating div element over a colored background. But the color will not show.
Only if I put Div after the class it will then show

examples


<head
<style type="text/css">
.back {background:yellow; width:50px; height:50px}
.left {float:left;}
</style>
</head>
<body>
<div class="back">
<div class="left">bla bla</div>
</div>
</body>

Having it like this, as any normal logical human would do, I guess. Then it would create a yellow background under the float div. But it does not

If you put an extra div after the .back like this


.back div {background:yellow;}

Then it will show the yellow background.

Just interesting to know why it acts like thisShowed for me both ways on IE and FF. But I also fixed your <head> tag.
 
Back
Top