단락이 이미지와 올바르게 정렬되지 않는 이유는 무엇입니까?

포트폴리오를 직접 코딩하려고하는데 블로그 게시물 이미지 미리보기와 설명 미리보기를 정렬하는 데 문제가 있습니다. 다음은 내 컴퓨터에서 어떻게 보이는지에 대한 예시 이미지입니다.

내 웹 사이트의이 부분에 대해 작성한 HTML 및 CSS 코드는 다음과 같습니다.

HTML :

<!-- Beginning of "Recent Entries" blog posts -->
<div class="offset-by-one">

   <!-- Beginning of "Recent Entries" title -->
   <div class="recent">

      <h2 class="recent">Recent Entries</h2>

   </div>
   <!-- End of "Recent Entries" title -->

   <hr>

   <!-- Beginning of first blog post preview -->
   <div class="first-post">

       <!-- Beginning of first blog post date -->
       <div class="date">21 JUL 2013</div><br />
       <!-- End of first blog post date -->

       <!-- Beginning of first blog post picture -->
       <img src="./images/post1.png">
       <!-- End of first blog post picture -->

       <!-- Beginning of first blog post description -->
       <div class="offset-by-four">

          <p class="blog">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc eu mauris luctus tristique a a urna. Aliquam accumsan a quam id vehicula. Donec mattis justo purus, at congue ligula rhoncus nec. Duis vulputate nisl ac massa iaculis, at faucibus nunc mattis. Aliquam sit amet eros arcu. Aliquam accumsan a quam id vehicula. Donec mattis justo purus...</p>

          <!-- Beginning of first blog post "Read more" link -->
          <div class="offset-by-nine">

              <a class="read-more" href="#">Read more...</a>

          </div>
          <!-- End of first blog post "Read more" link -->

   </div>
   <!-- End of first blog post description -->

 </div>
 <!-- End of first blog post preview -->

</div>
<!-- End of "Recent Entries" blog posts -->

CSS :

/* "Recent Entries" section */
h2.recent {
    padding: 75px 0 0 0;
    font-family: "Raleway";
    color: #DD4422;
    font-size: 28px;
}

.date {
    font-size: 18px;
    color: #9D9D9D;
    position: absolute;
    z-index: 1;
}

.blog img {
    border: 3px solid #D5D5D5;
    position: absolute;
    z-index: 1;
    margin: 15px 0 0 0;
}

h1.blog-title {
    font-size: 22px;
    font-family: "Helvetica";
    color: #0094AA;
}

p.blog {
    color: #484848;
    font-size: 14px;
    font-family: "Helvetica";
    line-height: 180%;
}

a.read-more {
    text-decoration: none;
    color: #0094AA;
}

이 문제를 알아 내려는 사람이 실제 웹 페이지를보기 쉽게한다면 첫 번째 요청시 링크를 게시 할 것입니다.

도와 주셔서 감사합니다!

편집하다:

또한 다음은 내가 원하는 모습의 이미지입니다.