Managing and positioning CSS <divs> - html

Question

I am trying to achieve this:
...as a format for news articles on my site (runic-paradise.com). You can see I've achieved everything except the orange bits. I'm trying to make the orange bits their own divs so I can put them in colored square backgrounds - to resemble something like this:
...however, I can't seem to get the divs to do what I want. It ends up messing up the 2 lower divs holding the image and text content. Anyone have any quick tips on how to achieve this? :(
JSFiddle of what I have so far:
http://jsfiddle.net/HDbq6/1/
HTML:
<div class="articleshell">
<div class="articletitle">
<h4 class="newstitleh4">A shining beacon in the desert - November 5, 2013</h4>
</div>
<div class="articleauthor">
Author
</div>
<div class="articleimg">
<img src="images/thumbs/EukitoDesertTempleThumb.jpg" width="90" height="90" class="news_thumb" alt="Eukito's Desert Temple" />
</div>
<div class="articletext">
<p>Eukito has completed construction of his desert temple. Of course no temple is complete without a secret passage or two... Stop on by at night to see it shining in the desert!</p>
</div>
</div>
CSS
.articleshell {
width: 770px;
max-height: none;
min-height: 130px;
padding-top: 5.px;
padding-right: 5.px;
padding-bottom: 5.px;
padding-left: 5.px;
padding-top: 1px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
background-color: #564D4D;
}
.articletext {
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
clear: both;
}
.articleimg {
float: left;
margin-right: 15px;
margin-bottom: 5px;
width: 90px;
height: 90px;
margin-left: 5px;
clear: both;
}
.articletitle {
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
margin-top: 3px;
float: left;
}
.newstitleh4 {
margin-bottom: 2px;
margin-top: 2px;
}
.articleauthor {
float: left;
text-align: right;
}
.articlecontent {
clear: both;
}

Answer 1

Something like this ?
fiddle
.main{width:500px; height:200px; border:1px solid #ccc; background:#f3f3f3; padding:5px;}
#title{width:45%; background:#ccc; border:1px solid #333; display: inline-block;}
.buttons{width:15%; background:orange; display: inline-block; border:1px solid #333;}
.mainContent{ width:100%; color:#ccc; border:1px solid #333; margin-top:5px; height:170px;}
<div class="main">
<div id="title">Title</div>
<div class="buttons">Author</div>
<div class="buttons">Role</div>
<div class="buttons">Date</div>
<div class="mainContent"></div>
</div>
The title id have a display:inline-block and div to get the thumb and the text content, that way the "buttons" don't mess up with the content. (I think)