1

I had to to let a hover div menu get out of its container, so I declared that container with overflow: visible and it works, but now that container has lost its margin-bottom with the rest of the following in the list.

I've read this question and this one, as well as read a few other articles, and have tried putting paddings and the html code referenced on different elements, but I can't get what is going wrong in my specific case.

The url is http://melopienso.com/testingtwo/shop/ and each "ul.products li" should be having the bottom margin.

Any ideas? Thank you very much for your help!

Community
  • 1
  • 1
Jacobo Polavieja
  • 786
  • 1
  • 6
  • 16

1 Answers1

1

The problem is that the element you want the margin-bottom on are floated. Therefore they don't extend their parent's height. so if you aply the margin on the parent, it will be "under" the floated elements.

Explanation for your case :

In your example li.product has 2 children : a and gk-columns . .gk-columns has only floated children so its height is 0 because floated elements don't extend parent's height. Therefore the height of li.product is only extended by the a tag which is 28px.

So if you aply margin-bottom:50px; on li.product it will push the content only of 

28px + 50px = 78px

which is less than the height of the floated div.

You can solve this with several solutions :

solution 1 add the margin-bottom on the floated elements like this for your example :

.gk-columns>div{
    margin-bottom:50px;
}

Solution 2 if the height of the children elements is fixed set the height to the parent element so it covers the height of the floated children like this for you example :

.gk-columns{
    height:159px;
}
web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • thank you very much it works, although I don't quite get why. The element I'm trying to put the margin-bottom is "ul.products > li", and that element has "overflow: visible" but it is not floated (at least checking Chrome's computed styles). I'd appreciate if you could clarify that doubt. And thanks a lot! – Jacobo Polavieja Dec 19 '13 at 11:37
  • It is GREAT. Thank you so much, it's been very very useful. Would this all be easier if I used "inline-block" for the .gk-columns children instead of floated elements ? – Jacobo Polavieja Dec 19 '13 at 11:52