Problem with picture rescaling, gap under photo when resized

I’m at my wits end… I can’t seem to figure this one out. I’m trying to design a page and implementing some responsive design with picture resizing. When I have the page open to the maximum width, all is well. As I shrink the page, the picture resizes properly, but it then adds a gap between the photo and the menu. I’ve changed the div background colour to red so it’s more visible.

The page is at – right under the banner, you’ll see a red bar if you shrink the page. Any idea what I’m wrong?

I would be eternally grateful to anyone who may be able to provide me with the solution!


The gap is caused by the margin that accompanies inline objects (the image). It can be negated by adding {vertical-align:top;} to the banner image.

1 Like

Yep, or display: block.

1 Like

Wow. Thank you gentlemen! Both solutions worked! I didn’t see either of those anywhere in anything else I googled.

Very much appreciated!


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.