CODEWITHSUNDEEP
htmlcss
Derp
Derp

Reputation: 109

Display inline content on separate lines

I have a simple block with content:

<div>
    <img src="/img/sample.png" alt="Sample image">
    <span class="colored-text">Company name</span>
    <em>Address</em>
</div>

I want 'Company name' and 'Address' to be on separate lines.

And now I have several options available:

Make additional <div>s, add a <br/> tag between the <span> and <em> tags and maybe some other solutions. What is the proper way to add such functionality?

Upvotes: 1

Views: 10422

Answers (6)

ASertacAkkaya
ASertacAkkaya

Reputation: 661

Possiblity 1 (without CSS): http://jsfiddle.net/mnnLG/1/

Using <br /> to skip to a new line.

Possiblity 2 (with CSS): http://jsfiddle.net/mnnLG/2/

Using display:block CSS to make the inline elements take block attributes.

Alternate Possibility:

Wrap each element with a block-type element. It can be ul/ol->li combination, or a simple div element.

Upvotes: 0

iphipps
iphipps

Reputation: 555

Following CSS will do the trick:

span.colored-text{ display:block; }

Upvotes: 0

otinanai
otinanai

Reputation: 4025

You can use only CSS and make the em tag break in its own line:

div em {display:block}

or

div em {float:left;clear:both}

Either way the Address will break line and you don't have to touch your HTML.

Upvotes: 4

MissScarlett
MissScarlett

Reputation: 63

Add a break at the end of each line.

Upvotes: 0

gotohales
gotohales

Reputation: 3695

There are a number of options.

<div>
    <img src="/img/sample.png" alt="Sample image">
    <span class="colored-text">Company name</span>
    <br />
    <em>Address</em>
</div>

or

<div>
    <img src="/img/sample.png" alt="Sample image">
    <p class="colored-text">Company name</p>
    <p><em>Address</em></p>
</div>

or

<ul>
        <li><img src="/img/sample.png" alt="Sample image">
        <span class="colored-text">Company name</span></li>
        <li><em>Address</em></li>
    </ul>

and many more, including variations on the listed.

Upvotes: 1

Levi Botelho
Levi Botelho

Reputation: 25204

You should do what semantically makes the most sense. In general, div tags are meant to represent some kind of DIVision in the page. If you are simply listing an address it doesn't make sense to do this. I would personally use a <br /> at the end of the line which adds a line break without making any kind of semantic statement about your content.

Upvotes: 8

Related Questions