html - CSS Div Alignment Problem -


i have 2 divs make header, #title , #header. inside #totaltop. should flush against top, , should flush against each other. here's how looks like:

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

here's css code 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 them fit together? have reset.css in full stylesheet.

edit:

added vertical-align: top;, looks sort of gap between elements. it's 3-4px , chrome's inspect tool can't figure out whether #title or #header that's causing problem:

http://i55.tinypic.com/j0i4nr.jpg

i think need vertical-align: top on display: inline-block elements.

that should sort out.

if it's not that, try removing whitespace inside html markup around elements.
(it's known issue)

i'm not sure because haven't shown relevant code.


Comments

Popular posts from this blog

c# - How to set Z index when using WPF DrawingContext? -

razor - Is this a bug in WebMatrix PageData? -

visual c++ - Using relative values in array sorting ( asm ) -