CODEWITHSUNDEEP
htmlcss
J.Zil
J.Zil

Reputation: 2449

Content on new line without using BR

I'm trying to achieve a simple layout like this:

Title at place----------Date
Location------------Complete

this is what I have now: http://jsfiddle.net/80m96ko3/2/

I want to have location and complete on the line below. Is the only way to achieve this to use a BR, unless I have to use a display block which will make the title link clickable across the entire width (which I don't want). I'd also rather not use a <table>.

<div class="job">
<span class="title">Title</span> at <span class="place">Place</span><span class="posted right">15 Jun</span>
<span class="location">Location</span><span class="type right">Complete</span>
</div>

Upvotes: 0

Views: 99

Answers (3)

Mr_Green
Mr_Green

Reputation: 41832

You can use pseudo class :before (or :after) to break a line.

.location:before{
    content: "";
    display: block;
}

Upvotes: 5

wikijames
wikijames

Reputation: 192

Use a unordered list. It will do your job.

<ul class="job">
  <li>
    <span class="title">Title</span> at <span class="place">Place</span><span class="posted right">15 Jun</span>
  </li>
  <li>
    <span class="location">Location</span><span class="type right">Complete</span>
  </li>
</ul>

Upvotes: 1

rnevius
rnevius

Reputation: 27092

Why not use an unordered list?

<div class="job">
    <ul>
        <li>
            <span class="title">Title</span> at <span class="place">Place</span><span class="posted right">15 Jun</span>
        </li>
        <li>
            <span class="location">Location</span><span class="type right">Complete</span>
        </li>
    </ul>
</div>

And your styles:

.right {float: right;}
ul {list-style: none ;}

Upvotes: 1

Related Questions