Images floating, clearfix

I do not know how to describe the problem, hence please visit the link.

In this (A), the white background is rendered nicely, but if I add开发者_如何学运维ed

<!-- Problem here -->
<ul class="thumb2"><li>
 <a href="/malaysia/ceiling-lights/8044-f610-255" title="">
  <img src="https://lh5.googleusercontent.com/_8Uc0MYA0xgM/TXQ-BvHi-uI/AAAAAAAAAL4/vgYnsHjUziU/s220/8044f610255.jpg" title="" alt="" /></a>
</li></ul>
<!-- Problem here end -->

Then the page become (B), the white background disappears.

How do I solve the problem?

---

The problem is that all of the thumbnails are "floated." See the CSS "float" property. Floated elements do not take up page space. To fix that, you can use some sort of CSS "clearfix" after all of the thumbnails.

The quickfix for this is to add:

<br style="clear: both;" />

After all of your thumbnails.

Another option is something like:

.spacer
{
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
}

And then you can add:

<div class="spacer"></div>

Nowadays, crazy hip developers are using something like:

http://www.webtoolkit.info/css-clearfix.html

---

just add

  <div style="clear: both;">&nbsp;</div>

after the </ul>

The problem you are having has to do with your floated image elements. CSS can have difficulty calculating the height of a div that contains floated elements.

---

JUST Replace your current code with the below codes. It will 100% work

<style type="text/css">
   .clearfix {
      clear:both;
    }
</style>

<ul class="thumb2"><li>
 <a href="/malaysia/ceiling-lights/8044-f610-255" title="">
  <img src="https://lh5.googleusercontent.com/_8Uc0MYA0xgM/TXQ-BvHi-uI/AAAAAAAAAL4/vgYnsHjUziU/s220/8044f610255.jpg" title="" alt="" /></a>
</li>
</ul>
<div class="clearfix"></div>