CSS background-color has no effect on a DIV

Question

Hello,

<div style="background-color:black" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>

Why does the background color not show as black? I cannot set the width and float, is it possible without them?

Thank you for your time.

Answer 1

Since the outer div only contains floated divs, it renders with 0 height. Either give it a height or set its overflow to hidden.

Answer 2

Change it to:

<div style="background-color:black; overflow:hidden;" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>

Basically the outer div only contains floats. Floats are removed from the normal flow. As such the outer div really contains nothing and thus has no height. It really is black but you just can't see it.

The overflow:hidden property basically makes the outer div enclose the floats. The other way to do this is:

<div style="background-color:black" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
<div style="clear:both></div>
</div>

Oh and just for completeness, you should really prefer classes to direct CSS styles.

Answer 3

Without floats (and unneccessary divs):

<div style="background-color:black;" onmouseover="this.bgColor='white'">
    hello world
</div>

If you use floats, you have to float the outer div and specify widths.

Answer 4

Floats don't have a height so the containing div has a height of zero.

<div style="background-color:black; overflow:hidden;zoom:1" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>

overflow:hidden clears the float for most browsers.

zoom:1 clears the float for IE.

Answer 5

You forgot the semi colon! ;;;;;;; put one of these after the word black! Also do what Machine suggested you :)