Why does background-color have no effect on this DIV

Question

lt div style  quot background-color black quot  onmouseover  quot this bgColor  white  quot  gt       lt div style  quot float left quot  gt hello lt  div gt       lt div style  quot float right quot  gt world lt  div gt   lt  div gt   Why does the background color not show as black  I cannot set the width and float  is it possible without them

User · Answer

Floats don t have a height so the containing div has a height of zero    lt div style  background-color black  overflow hidden zoom 1  onmouseover  this bgColor  white   gt   lt div style  float left  gt hello lt  div gt   lt div style  float right  gt world lt  div gt   lt  div gt    overflow hidden clears the float for most browsers    zoom 1 clears the float for IE

User · Answer

Change it to    lt div style  background-color black  overflow hidden   onmouseover  this bgColor  white   gt   lt div style  float left  gt hello lt  div gt   lt div style  float right  gt world lt  div gt   lt  div gt    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    lt div style  background-color black  onmouseover  this bgColor  white   gt   lt div style  float left  gt hello lt  div gt   lt div style  float right  gt world lt  div gt   lt div style  clear both gt  lt  div gt   lt  div gt    Oh and just for completeness  you should really prefer classes to direct CSS styles

User · Answer

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

User · Answer

This being a very old question but worth adding that I have just had a similar issue where a background colour on a footer element in my case didn t show   I added a position  relative which worked

[html] Why does background-color have no effect on this DIV?

Examples related to html

Examples related to css