image sliding down with h3 tag

I have an image and h3开发者_运维技巧 tag together, and I need them side by side.

<img src="..." alt="..." /><h3>Shopping Cart</h3>

But the image is sliding down. How can I resolve this?

float:left; use it on both or display:inline; might be better try both

float the 2 element float:left for img and float:right for h3 tag

if there is not enough space for h3 then it will go down. use display:inline-block instead of float try

<img src="..." style="float:left" alt="..." /><h3 style="float:right">Shopping Cart</h3>

display: inline for both will work better. The other thing is you should probably enclose them in a div with either a fixed-width (ie: width: ___px) or a min-width (ie: min-width: ___px) so you always preserve sufficient horizontal space for them to sit side by side. No matter what solution you use to make them sit beside each other, if there isn't enough width and you aren't preserving the width, then they'll collapse and stack vertically.

If the image is related to the title, then the IMG tag should go inside the H3:

<h3><img ... /> Shopping Cart</h3>

Once you've done that, you can adjust the image's vertical alignment relative to the baseline of the heading by using something like:

h3 img {top:5px}

Another idea is to remove the IMG entirely and give the H3 a special class name which adds padding and shows the icon as a background image. This is good because it's easier to change a stylesheet than a HTML template, the code is shorter and the page is more accessible.

h3.shoppingcart {padding-left: 20px; background:url("cart.gif") center left no-repeat;}