It's strange how this issue always occurs when using floats.
This is what my div (samle) looks like:
<div class="main>
<div class="inn_div"> </div>
</div>
Here is my stylesheet:
.main{ width:250px; border:1px solid #000; }
.main .inn_div{ float:left; width:25px; height:50px; border:1px solid #000; }
As you can see in the image below, the inn_div overflows from .main. It works fine when using "inline-block or table-cell", but I don't want to use those. What could be the problem with float or is it something I am doing wrong?