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:
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
Post a Comment