CODEWITHSUNDEEP
css
Jacobo Polavieja
Jacobo Polavieja

Reputation: 786

Can't prevent margins from collapsing

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!

Upvotes: 1

Views: 93

Answers (1)

web-tiki
web-tiki

Reputation: 103760

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;
}

Upvotes: 1

Related Questions