How to properly set the divs in an article

Question

So i need to convert this image to html and css and I was wondering the proper way to do this as im still confused when to use div and span. So, first of all i made a list and then two divs inside it, one for the image and the article. In the article, i thought putting on divs would be too much and just didnt put any and started putting span. :/ Should i put div for every element like the date then heading and the paragraph? Can someone suggest a good method for this?

 <div class="posts clrfix">
      <ul>
        <li>
          <div class="post-image">
            <img src="images/take-a-break.png" alt="take-a-break">
          </div>
          <div class="post-content">
            <span class="post-date"><em>October 9,2015.</em></span>
            <span class="post-comment"><em>4 Comments</em></span>
            <h1>TAKE A BREAK</h1>
            <p>Lorem ipsum dolor sit amet, consec tetuer adip iscing elit. Aenean commodo ligula eget dolor. Aenean mas- sa. Cum sociis natoque penatibus  ...</p>
          <span class="post-read-more"><a href="#">READ MORE</a></span>
          </div>
        </li>
        <li></li>
 </ul>
 </div>

Use bootstraps's grid concept. Here is link : [bootstrap](http://getbootstrap.com/css/). — Noopur Dabhi, Dec 12 '15 at 13:30
refer to http://stackoverflow.com/questions/183532/what-is-the-difference-between-html-tags-div-and-span, i.e. duplicate question. — Gavin Simpson, Dec 12 '15 at 13:30

sodawillow · Accepted Answer · 2015-12-12T18:03:36.750

I would only get rid of the useless ul/li here.

You can also use the article tag for your article :-).

body {
  box-sizing: border-box;
  font-family: Arial;
  font-size: 10px;
}

.posts {
  display: inline-block;
}

.post-image {
  display: inline-block;
}

.post-image img {
  display: block;
  width: 200px;
}

.post-content {
  display: inline-block;
  padding: 2em;
  vertical-align: top;
  width: 200px;
}

.post-comment {
  margin-left: 1em;
}

<article class="posts clrfix">
  
  <div class="post-image">
    <img src="http://img11.hostingpics.net/pics/526346Untitled.png" alt="take-a-break">
  </div>
  
  <div class="post-content">
    <span class="post-date">
      <em>October 9, 2015</em>
    </span>
    <span class="post-comment">
      <em>4 Comments</em>
    </span>
    
    <h3>TAKE A BREAK</h3>
    
    <p>Lorem ipsum dolor sit amet, consec tetuer adip iscing elit.</p>
    
    <span class="post-read-more">
      <a href="#">READ MORE</a>
    </span>
  </div>
  
</article>

How to properly set the divs in an article

1 Answers1