Why is my "margin: 30px" instruction being ignored?

Question

I'm having difficulty with setting the margin between 2 elements on my page.

An example is depicted here: http://jsfiddle.net/fHC9Y/1/

You can see that there's no space between the paging structure under the table and the footer box, where I've specified in the CSS that there should be 30px of space between them.

This is an issue in IE8 & Firefox (haven't tried other browsers).

Does anyone have any idea what this could be?

Answer 1

div#Tab is floated left, that is why you get this behaviour. Try to wrap it in another div with overflow: hidden;.

Answer 2

Or you could work around it by giving your paging structure margin-bottom.

http://jsfiddle.net/hYgQG/

Answer 3

The float:left; of the element above it is what is causing the margin not to be applied. (in jsfiddle, try removing the float and see what happens)

You appear to be doing a clear:both on both the divs, but that isn't helping. If you need the float on the preceding element, you'll need to have an extra div between them or wrapping one of them with an extra <div>.

Hope that helps.

Answer 4

Remove float:left; from .tab_container.

Answer 5

Try adding a <p style="clear:both"/> between your table and the footer.