inline-block not working

[moose86]

Hi Guys,

I know this is very basic, but for some reason the div's dont line up, info displays under logo, if you know how to fix this i would really appreciate it

<div id="logo">
<img src="FILENAME" width="100%"/>
</div><!--logo-->
<div id="info">HI
</div><!--info-->


#logo {
display: inline-block;
*display: inline;
width: 15%;
vertical-align: top;
padding: 6px 3px;
}

#info {
display: inline-block;
*display: inline;
width: 20%;
vertical-align: top;
text-align: right;
background: #006699;
}

Thanks :)

[Beverleyh]

What do you mean exactly when you say that they don't line up?

I've had to guess and add "background:red" to the #logo styles, but the divs sit side-by-side and their tops are flush with each other with that in place.

Its going to be best if you provide a link to your actual page though - maybe the image dimensions and/or other CSS is affecting the display. Or maybe screen size, or browser, or doctype, or another element encroaching on space - lots of things could have an impact. Its impossible to say without seeing it in context and without you providing more info.

[traq]

works for me (http://jsfiddle.net/traq/6CvH3/) too.

As a side note, *display: inline is not necessary and should be removed unless you need to support IE7 and below (and even then, you would also have to give the divs "hasLayout" by adding zoom: 1 or a z-index for it to have any effect).