Question

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!

Answer 1

Simply add overflow:auto to your container div:

style="background-color:#f00; overflow:auto;"