Review of HTML and CSS for a newsfeed of posts

Question

Originally my wireframe was

But I ended up going with this in testing. The image is the result of my new code.

Keep in mind that the actual content is just filler content and will be dynamic. I just wanted to get the styling in place.

I created each article with the following code

HTML

<div class="discusBox">
 <img src="http://placekitten.com/120/120"> <!-- just for testing -->

 <div class="discusTitle">
   <h3>[test] Title of the Discussion</h3> <!-- just for testing -->
 </div> 

 <div class="discusBrief">
   <p>Here we are talking about something. and this is the short brief about it.</p>    
<!-- just for testing -->
 </div><!-- end of discusBrief -->

 <div class="discusMeta">

   <div class="discusMetaPostedOn">
     <span>Posted on</span>
     <span class="discusMetaPostedOnDate">
       4/4/1984 <!-- just for testing -->
     </span>
   </div>

   <div class="discusBy">
     <span>by</span>
     <span>
       Firstname Surname <!-- just for testing -->
     </span>
   </div>

   <div class="discusLink">
     <a href="#">View &rarr;</a> <!-- just for testing -->
   </div>

 </div><!-- end of discusMeta -->
</div>

CSS

.discusBox {
  border: #333 solid 1px;
  height: 120px;
  width: 720px;
  position: relative;
  background-color: #fff;
}

.discusTitle {
  line-height: 40px;
  padding-left: 6px;
  position: absolute;
  top: 0;
  left: 120px;
  width: 600px;
  vertical-align: middle;
}

.discusTitle h3 {
  font-size: 18px;
  font-weight: bold;
}

.discusBrief {
  height: 60px;
  width: 600px;
  position: absolute;
  top: 40px;
  left: 120px;
  overflow: hidden;
}
.discusBrief p { padding-left: 6px; }

.discusMeta {
  height: 20px;
  width: 600px;
  position: absolute;
  top: 100px;
  left: 120px;
  font-size: 11px;
  line-height: 20px;
  vertical-align: middle;
}

.discusMetaPostedOn, .discusBy {
  display: inline;
  float: left;
}

.discusMetaPostedOn {
  padding-left: 6px;
  margin-right: 24px;
}
.discusMetaPostedOn p { margin-bottom: 0;}

.discusBy { }

.discusLink {
  float: right;
  background-color: #2fb7e0; 
  width: 120px;
  text-align: center;
}

.discusLink a{
  color: #fff;
  text-decoration: none;
  display: block;
}

Answer 1

this looks really good so far,

I don't see anything that I would change about this. you are using span tags correctly and efficiently for what you are doing with them, your div tags are also used to the best of their abilities.

your CSS also looks good, I don't think I would change anything there either.

I guess the only thing that I might change, and this depends on how you intend to use it, is probably the grouping of the discusBy and the discusMetaPostedOn, I might group those together because they look like they are going to be the same formatting aside from the things that you have given specific classes to.

you might want to give each <div class="discusBox"> it's own unique ID especially if you are going to work some Javascript magic or server-side magic on it.

otherwise it looks really good, you probably won't make any of the changes I mentioned because of the way you want to go forward with the code.