[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 230
  • Last Modified:

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!
0
bbdesign
Asked:
bbdesign
  • 3
  • 2
1 Solution
 
jonahzonaCommented:
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.
0
 
jonahzonaCommented:
SORRY!

That should say

margin-top: -12px;

Woops.
0
 
bbdesignAuthor Commented:
Thanks!
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
jonahzonaCommented:
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.
0
 
bbdesignAuthor Commented:
Excellent point!
0
 
Dave BaldwinFixer of ProblemsCommented:
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'.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now