extra space appearing at bottom of page due to CSS, how to eliminate

On this page:

http://secure.bbdesign.com/sterlingmodular/

...if you reduce the height of the browser window to force scrolling, there is about 60 pixels of unwanted vertical space below the content on the page (see attached screenshot from Safari). I tried to code my CSS to have no margins or padding that would cause all that space.

I need to somehow eliminate it. I've spent a lot of time trying different things and its becoming frustrating. It may be something simple and I'm just not seeing it. So I would really appreciate another set of eyes to take a look. Thank you!

screenshot
Brad BansnerWeb DeveloperAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
darren-w-Connect With a Mentor Commented:
This looks like the size of the div that is holding the image and the text, try styling these divs to the correct height (253px)

Darren
0
 
Chris StanyonCommented:
@bbdesign.

Inside each of your DIVS you have a class for the paragraph of text (homethree, homefour) that sets the position:relative and, for example, top to -55px.

The gap that appears is because of the that top:-55px - try changing that to margin-top:-55px; and see how you get on.


0
 
Brad BansnerWeb DeveloperAuthor Commented:
@darren-w-: that did it! Thanks. I assumed a plain <div></div> would just collapse down to the minimum size.

@chrisstanyon: I did try that, but no affect. The "top" isn't a margin, if I change it to margin-top, then the text appears below the image instead of over it.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.