Question

I have a span wrapping a img element and another span element, which is used for the description of the image. I want the image to be on top and then some text below the image.
I found a way using firefox specific css properties, but this wont work on any other browser. Is there another way to get this effect or mimic how it looks in firefox?

HTML:

 <span class="image">
   <img class="" alt="pic" src="pic.jpg" />
     <span class="img-desc">
       Call us today!
       <span>888-888-8888</span>
     </span>
  </span>

CSS:

 .image {
    float: right;
    width: -moz-min-content;
}

Answer 1

Change all of your <span>‘s into <div>‘s and it will work. That’s because, by default, a <div> (block level) will cause line-breaks before & after itself, where a <span> (inline) does not.

http://jsfiddle.net/TbY4N/

<span>‘s were designed for “inline” use and, generally, you shouldn’t see them containing a bunch of other tags or block level elements. Although, you can easily force them to behave like <div>‘s (block level), this is an issue of proper semantics.

Span versus Div according to the W3C wiki article…

“The div element, short for division, is the block level generic
container. It is normally used to wrap around other block level
elements, to group them together (see the next section for more of
an exploration of this). It can also be used to collect together a
bunch of inline elements and/or text that otherwise don’t logically
fit under another block level element, but this should be a last
resort.”

“The span element is the inline level generic container. It also
helps to inform the structure of document, but it is used to group
or wrap other inline elements and/or text, rather than block level
elements.“