asked on

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

Bottom of this page:

http://secure.bbdesign.com/lighthousechristiancenter/support-groups.asp

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!

jonahzona

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.

ASKER CERTIFIED SOLUTION

jonahzona

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Brad Bansner

ASKER

Thanks!

jonahzona

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.

Brad Bansner

ASKER

Excellent point!

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'.