title: Building a post using article tags
body: <p>I am building a post item for a website using the article tags and this includes some elements such as an avatar, pot title, post body and post footer, there will also be some controls like a menu icon which shows a menu but I am not to worried about that for now.</p>
  
  <p>I am curious as to the best way to position the layout because it seems a bit messy at the moment and would like this to be a bit more solid and constant.</p>
  
  <p>Here is a demo of what I have done so far.</p>
  
  <p><a href="http://jsfiddle.net/iamdanbarrett/zynnLb0x/" rel="nofollow">Demo Fiddle</a></p>
  
  <p>So as you can see it a little messy and I just need some expertise on the best way to lay this out. There is one sticking point that it needs to be responsive but if I could have suggestions on the desktop view of it I can handle the rest but it would be good to get your views.</p>
  
  <pre><code>&lt;article class="timeline_posts"&gt;
  
      &lt;div class="timeline_post_avatar"&gt;
          avatar
      &lt;/div&gt;
  
      &lt;div class="timeline_post_title"&gt;
          post title
      &lt;/div&gt;
  
      &lt;div class="timeline_post_body"&gt;
          post body
      &lt;/div&gt;
  
      &lt;div class="timeline_post_footer"&gt;
          post footer
      &lt;/div&gt;
  
      &lt;div class="timeline_post_menu"&gt;
          menu control
      &lt;/div&gt;                                      
  
  &lt;/article&gt;
  
  
  .timeline_posts{
      background-color: #f1f1f1;
      box-sizing: border-box;
      margin: 0 0 20px 0;
      width: 100%;
      float:left;
      padding: 10px;
  }
  
  
  
  
  
  
  /******* Timeline post body *******/
  
  
  .timeline_post_avatar{
      background-color: red;
      box-sizing: border-box;
      float:left;
      width: 20%;
      padding: 40px;
  }
  
  .timeline_post_title{
      background-color: blue;
      box-sizing: border-box;
      float:left;
      padding: 10px;
      width: 70%;
  }
  
  .timeline_post_body{
      background-color: green;
      box-sizing: border-box;
      float:left;
      padding: 10px;
      width: 70%;
  }
  
  .timeline_post_footer{
      background-color: yellow;
      box-sizing: border-box;
      float:left;
      padding: 10px;
      width: 70%;
  }
  
  .timeline_post_menu{
      background-color: red;
      box-sizing: border-box;
      float:left;
      width: 10%;
  }
  </code></pre>