Link to home
Create AccountLog in
Avatar of Brad Bansner
Brad Bansner

asked on

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!

User generated image
ASKER CERTIFIED SOLUTION
Avatar of darren-w-
darren-w-
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of Chris Stanyon
@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.


Avatar of Brad Bansner
Brad Bansner

ASKER

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