How to remove unwanted vertical spacing between divs

Question

I've run into a bit of a snag whilst developing the frontend for a website. I'm competent with CSS, but not fantastic. Anyway, I've created a jsFiddle here that illustrates my problem.

On each page of my website, at the top of the content section, I have a banner image. I wish to put a two colour divider seperating this banner from the content. (As is shown in the mockup my designer gave me: https://www.dropbox.com/s/d9opotyiyp0yc9o/menus.jpg)

I'd like to do this in pure CSS+HTML, without just chucking an image in. Anyway, I've done so using the following code:

<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg" style="width: 100%;">
<div>
    <div style="width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%; height:10px; display: inline-block; background: #E5C697;"></div>
</div>

(Please forgive the inline CSS, it's just for demonstration purposes. Also, unfortunately, if I put the second div on a newline and indent it, it creates whitespace)

The issue I'm having is that there is a large gap between the divider and the image. I have tried adding margin: 0px and padding: 0px to all the relevant elements, and the whitespace is still there.

Could someone help me out please?

Thanks, YM

Answer 1

To me it's a vertical alignment issue. You can try

.banner {
    display: block;
    width: 100%;
}
div {
    height: 10px;
    vertical-align: top;
}

That way you don't have to use negative margins (which aren't wrong, just controversial practice).

Check it out here

Answer 2

you can make the position relative and then set the top to something minus. ex:

 position: relative;
 top:-10px;
 left:0px;