Formatting inline items? What does the general code look like?

Question

This is a total newbie question, so thanks in advance. I'm trying to get my head around the difference between divs and spans, and when and how to use them.

Say for instance, I want to have an image left justified, and I want the text to flow around the image on the right, while maintaining justification. If the text flows past the image, I want it to wrap around the bottom of the image...same as what we call in the layout world, "wrap".

I'm looking for an example to reference, so in your answer can you provide an example of the mark up?

Huge Thanks!!!

Answer 1

Block level means basically that it starts on its own line by default, whereas inline sits beside other elements.

[block]

[block]

versus

[inline][inline]

Neither are wrapped, however. If you were to have text wrapped around the image, you would float the image to a side. An example of this would be as follows

<img src="picture.jpg" alt="An image" style="float: left" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eros. Curabitur posuere. Cras sodales leo quis mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum adipiscing nunc vel arcu. Ut sed quam non est molestie commodo. Suspendisse metus erat, cursus fermentum, faucibus nec, pulvinar et, lorem. Praesent odio. In interdum imperdiet enim.

Answer 2

A SPAN tag is not intended to be a container for other tags. This is especially useful when combined with classes.

Use divs for defining sections of a page, and spans to enclose and style text or classes of text.

http://www.learnwebdesignonline.com/htmlcourse/span-div.htm shows a good example of how they are used. For your example of wrapping text, float the image and wrap it all in a DIV - like so:

<div>
test test test test <img src="" alt="" style="float:left;margin:8px 0 0 8px; display:inline" /> test test test test test test test test test test test test 
</div>

Answer 3

Divs and spans are kind like wildcard tags that have no semantic meaning. You can use them to group or identify elements when no other tag is appropriate (like tables, lists or headings). Their differences are:

div

• it's a block level element

• default display property is block which means:

  • its as wide as its container
  • always makes line breaks before and after
• can contain other block level elements like p, h1, table, ul, blockquote, div
• can contain other inline elements like img, strong, em, input, a, span

span

• is an inline element

• default display property is inline which means:

  • is as narrow as its content
  • does not makes any line break if not necessary)
  • you can use the css property vertical-align with it
• cannot contain block level elements
• can contain other inline elements like img, strong, em, input, a, span

You can always change their default display property with css, but you cannot change the type of elements they can contain, regardless of the display property value. For instance:

<span style="display:block">
    this will be displayed like a div,
    but still cannnot contain block level elements
</span>

Because they are "generic" tags, they're usually used for microformats in conjunction with classes. For instance: <span class="tel">555-5555</span>, because there is no <tel> tag.

As for the image wrapping, if the image is directly related to the text, you could use:

<p><img src="image.jpg" style="float: right" alt="my image" />Long paragraph.</p>

And no divs or spans would be required. However, if it is not, then you could use:

<p>unrelated to the image</p>
<div>
<img src="image.jpg" style="float: right" alt="my image" />
<p>Long paragraph.</p>
</div>

Here div is necessary because p is a block level element.

Finally, for more information you can check the official W3C spec topic about divs and spans.