tags:

views:

25

answers:

1

I wonder why div elements sometimes are zerosized while containing html layout. I want to set background-color but in vain. I use firebug to investigate layout and notice that some divs are empty.

For example this dirty HTML (attribute values are omitted by ...) has div that is zerosized:

    <div id="..." style="background-color:#f00; ">                                          
      <a id="..." href="javascript:void(0);" class="reportTitle"
onclick="reportClick(...)" style="float: left">...</a>
      <img id="..." class="hidden" src="..." style="padding: ..."/>
   </div>

What shall I do to avoid such issues?

Thank you in advance!

A: 

Simply add overflow:auto to your container div:

style="background-color:#f00; overflow:auto;"
Sarfraz
Oh thank you! Solution you provided definitely work even without height! But what is the reason why my div was zero sized? When shall I add overflow: auto to divs and when I can omit this attribute?
Andrew Florko
@Andrew: See this: http://www.quirksmode.org/css/clearing.html. You should add overflow when your parent container div is floated.
Sarfraz