1

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 #header that's causing the problem:

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
AKor
  • 8,550
  • 27
  • 82
  • 136

3 Answers3

2

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.

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • @rcravens: Thanks for taking the time to do that, it's now obvious that it's *both* the issues I mentioned in my answer, see: http://jsfiddle.net/AxPa2/1/ (whitespace removed) – thirtydot Mar 01 '11 at 00:17
  • 1
    White-space in your markup with `display:inline-block` will give you nightmares. You could apply floats if you're particularly sketched out. – canon Mar 01 '11 at 00:28
1

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.

Brilliand
  • 13,404
  • 6
  • 46
  • 58
  • Come to think of it, the display:inline-block; actually is necessary, so the whitespace removal is the way to go... or centering #wrapperDiv itself, or putting css in the wrapperDiv that makes all text within it shrink to nothing. – Brilliand Mar 01 '11 at 00:35
0

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.

Deviland
  • 3,324
  • 7
  • 32
  • 53