css margin is causing problem with bottom of div, adding space without background

Posted on 2011-05-03
Last Modified: 2012-05-11
Bottom of this page:

There is a break in the background image. The div class "subgroup" has a margin-bottom:12px which I suspect is causing it, because no other pages have the problem. The main background image is in the div "wrapper". "subgroup" is within that, I wouldn't have thought a margin of a div, contained within another div, would cause the containing div to expand without the background image? Its sort of acting like the container div had the margin, which it does not.

Would appreciate any help. Thank you!
Question by:bbdesign
    LVL 13

    Expert Comment

    This is kind of a janky way to do it, but you can do this.

    Give the #bottom a property of margin-bottom: -12px; at the end of the properties. Should fix it.
    LVL 13

    Accepted Solution


    That should say

    margin-top: -12px;


    Author Comment

    LVL 13

    Expert Comment

    As a better alternative than that, you could also keep the #bottom INSIDE the wrapper.

    So delete the closing DIV that ends the #bottom before the #wrapper div ends.

    Close the wrapper div after the bottom. This will also solve the issue.

    Author Comment

    Excellent point!
    LVL 82

    Expert Comment

    by:Dave Baldwin
    I made "margin: 0;" on 'div.subgroup' and the problem went away.  

    Also, you have id's that start with numbers '0goto' and that's against the rules.  Id's must start with a letter like 'goto0'.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    "I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now