Hi everyone,
I'm working on converting my existing site to a responsive design using media queries but upon resizing of the window there appearas a black area under the header image.

For example, On this page: http://classifieds.your-adrenaline-fix.com/ If you grab the border of your browser and squeeze it down to under 500px width you'll see what I mean.

I've been struggling with this for days and have tried margin:0; margin-bottom:0 for the header; and even margin-top:0; for the content area but nothing I do will prevent the content from being pushed down upon resizing of the browser.

If anyone has any CSS ideas that may correct this, I'd be most glad to hear what you guys think and I thank you all in advance (again).

Stuart K
If
m hav

min-height.

Hi Rolly, I wish it were that easy. I've experimented with and without this in every possible way and configuration.

Allow me to explain, Since it is set at 7.375em. This is relative to it's container so as the container resizes, anything set at a relative term will resize as well just as if it were set in percentage but from what I've read, em is better than % but nearly the same for all intents and purposes but after some research Im sticking with em so since div id Header is set in em it should resize exactly like the image does

I guess that brings us back to the drawing boards?

This is the problem. Your going to need some adjustments as this is the smallest it will ever get.

That paragraph seems to contain some misunderstandings that would lead to unintended results:
The unit "em" refers to default font size while "%", used in the same context, would relate to container size. In other words, "em" and "%" cannot easily be used interchangeably.
The standard font size for most browsers corresponds to 16px. Unless, or until, you change the default font size to something different from 100%, your quantity 7.375em will be a constant 118px.