Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Thanked 1 Time in 1 Post

    div's margin not visible

    This website contains #mainmenu, which has margin: 1em 0.

    However, there is no margin beneath the menu. It is butted up against the content below it.

    Why is this?

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Ilkley, West Yorkshire, UK
    Thanked 724 Times in 718 Posts
    Because all the elements within it that would give it a height are floated, taking them out of the flow of the document. #mainmenu consequently has no height, just a margin-bottom. You can see this if you view the element in Firebug (see sig).

    Have a try clearing the float by adding overflow:auto to #mainmenu ul. Once you've done this #mainmenu will have a height as well as the margin and the subsequent elements will be pushed down.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts