Question

This is my first website attempt and I’ve been following a great tutorial while trying to do my own thing in some ways. I have learnt a lot but have run into an issue.

The page is up at http://thelifefilm.com/

The ‘Post Tiles’ at the side currently have a margin-top to position them. This works great until the last post that extends onto the second line. So how can I work this so that the <div class="tile"> is always 15px below the post title.

On a side note, if anyone can explain how a go about fully centering my ‘comment numbers’ within the little speech bubble because currently it only looks good for certain numbers.

Thanks and apologies in advance if when I’ve deviated from the tutorial my code looks wonky to the trained eye.

Answer 1

Currently the <div class="tile"> is outside <div class="articleBody">. Put the tile inside the article body, below the h1 tag. Remove the top margin on the tile. Wrap the tile and the img that links to a single post in another div. Float the tile left and the single post image right.

Proposed structure:

<div class="articleBody">
    <h1>Post Title</h1>
    <div class="below-title-wrap">
         <div class="tile">...</div>
         <a href="blog-single.html">
              <img src="http://lorempixum.com/495/125/technics" alt="Tech">
         </a>
    </div>
</div>

Let me add as an edit, that for SEO reasons, it is not advisable to have more than one <h1> tag per page. I’d make them <h2> and <h1> only in single.php, respectively on the single post pages.