Question

     <div class="pull_down">
       <ul class="zvuc">
         <li class="prod">
           <div class="conutine">
             <div class="prod_name"><a href="">Asus 15.6-Inch Versati...</a></div>
             <img src="../images/test/lotr.jpg">
             <div class="timer"></div>
           </div>
         </li>
         </ul>
        </div>

CSS:

div.pull_down
{
    padding: 20px 20px 20px 30px;
}

li.prod
{
    background: url("../images/test/bg-horizontal.png") no-repeat;
    height: 286px;
    width: 170px;
    text-align: center;
    padding-top: 0;
    display: list-item;
    width: 170px;
    min-height: 286px;
    float: left;

}
ul
{
    list-style: none outside none;
    margin: 0;
    padding: 0;
    text-align: left;
}

When i mouse over the division with firebug, it doesn’t contain anything. Why is this?

Answer 1

Your are floating your LI’s so you most likely need a “clearfix” on the parent DIV.

A “clearfix” will force an element to self-clear it’s children.

http://css-tricks.com/snippets/css/clear-fix/

Demo: http://jsfiddle.net/wdm954/Dxkpx/

You can just add the .group classes to your CSS file and add class="group" to any parent that you need to clearfix.

This is a semantic and scale-able solution. You should avoid adding empty DIVs to your markup or extra CSS to parents (such as floats). That can produce undesirable results and become confusing in the long run.