CSS, Div Alignment Issue

I have two divs that make up my header, #title and #header. They are inside #totalTop. They should be flush against the top, and they should be flush against each other. Here's how it looks like:

http://i53.tinypic.com/2ykj0b7.jpgy

Here's the CSS code for the relevant part:

#totalTop {
text-align: center;
}
#title {
background-image: url(../img/TopBannerGradientOrange.png);
border-bottom-color: #FFF;
text-align: center;
border-bottom-style: solid;
border-bottom-width: 3px;
background: url(../img/TopBannerGradientOrange.png);
height: 150px;
width: 20%;
font-size: 25px;
display: inline-block;
}
#header {
border-bottom-color: #FFF;
border-bottom-style: solid;
border-bottom-width: 3px;
background: repeat-x;
background: url(../img/TopBannerGradientOrange.png);
width: 60%;
text-align: center;
height: 150px;
display: inline-block;
margin-top: 0;
}

How can I get them to fit together? I already have reset.css in my full stylesheet.

Edit:

Added the vertical-align: top;, so now it only looks like this sort of gap between elements. It's about 3-4px and with Chrome's Inspect Tool I can't figure out whether it is #title or 开发者_JAVA技巧#header that's causing the problem:

I think you need vertical-align: top on your display: inline-block elements.

That should sort it out.

If it's not that, try removing all whitespace inside your HTML markup around those elements.
(it's a known issue)

I'm not sure because you haven't shown all the relevant code.

The display:inline-block is causing them to behave like they're in a line of text. Stick this in your #title and #header blocks:

vertical-align: top;

The horizontal problem is most likely caused by a space in between them; you could edit your HTML to make sure that there is no whitespace between the end of the title div and the start of the header div, or you could get rid of that "display:inline-block;" that you don't actually mean anyway. For fixing the old-IE browser bugs, I recommend this hack:

#display:inline-block;

(That is, insert a "#" at the start of the line.)

Newer browsers will ignore that, since it's technically invalid, but it will still work around the old IE bugs.

just a point of reference for the future when using any Border you can use all of your selection in the same line, for instance

border-bottom: solid #fff 3px;

This will reduce your CSS.

Your problem:

I would user the following and adjust the div's accordingly

#tilte { position: relative; top: 0; wdith:[width of image];}

you could also use absolute but being as the div's are inside another relative will work fine

#header { position:relative; top:0 width:[width of image];}

if #totaltop only contains these two elements then make the widths equal the total width of #totaltop minus border padding margins etc.. this should line them up with alittle bit of

#totaltop div {float:left}

hope I have not made any glaring errors it is late and this is my last post today.

Hope this helps.