Maintain text on right side of image after clear both using CSS - css

Question

Using HTML and CSS I'm trying to display a news feed where there are an image, a title a date and the text itself.
In the below image, the first group is the actual result, the second one is the result I'm trying to achieve.
And here's the code:
HTML
<div class="news_block">
<div>
<img src="images/facebook.png">
<p class="title_news_tit"><strong>Title</strong></p>
<p class="title_news_date"><strong>21-21-2013</strong></p>
<p class="title_news_testo">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Morbi tempus porttitor elit. Nulla pretium sapien vel neque iaculis,
eu tempus dui dapibus. Ut rhoncus vestibulum dignissim.
Morbi convallis ligula ultrices, imperdiet est ac, iaculis ligula.
Pellentesque elementum, enim quis cursus varius, lectus nulla gravida nisl,
vel rutrum nisl leo tempor metus. Sed at feugiat eros. Vivamus tincidunt mauris
ultricies justo feugiat, in ultricies sem venenatis. Etiam sodales leo in iaculis facilisis.</p>
</div>
<div class="clear"></div>
</div>
CSS
.news_block {
margin: 20px;
padding: 10px;
min-height: 200px;
background: #F5F5F5;
}
.news_block img {
float: left;
padding: 20px;
}
.title_news_testo
{
float: left;
}
.title_news_tit
{
float: left;
}
.title_news_date
{
float: right;
}
.clear
{
clear: both;
}
EDIT
I made a mistake on the image I uploaded.. in the expected result I want the title aligned to the left and the date to the right.

Answer 1

To much of markup has been used by you, cleaned it up and works well in this way : DEMO
General tip : apply the vertical align to the image to align it always
CSS
.news_block {
margin: 20px;
padding: 10px;
min-height: 200px;
background: #F5F5F5;
}
.news_block img {
float: left;
padding-right:15px;
}
.title_news_date {
float:right;
}
HTML
<div class="news_block">
<img src="http://678ielts.com/wp-content/uploads/2012/11/facebooklogo-200x200.gif" style="width:100px;height:100px;vertical-align:middle">
<div class="text">
<p> <span class="title_news_tit"><strong>Title</strong></span>
<span class="title_news_date"><strong>21-21-2013</strong></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus porttitor elit. Nulla pretium sapien vel neque iaculis, eu tempus dui dapibus. Ut rhoncus vestibulum dignissim. Morbi convallis ligula ultrices, imperdiet est ac, iaculis ligula. Pellentesque elementum, enim quis cursus varius, lectus nulla gravida nisl, vel rutrum nisl leo tempor metus. Sed at feugiat eros. Vivamus tincidunt mauris ultricies justo feugiat, in ultricies sem venenatis. Etiam sodales leo in iaculis facilisis.</p>
</div>
</div>

Answer 2

Here is how you can do this on fiddle: http://jsfiddle.net/dZ2kX/2/
There was no need to float everything left
.news_block {
margin: 20px;
padding: 10px;
min-height: 200px;
background: #F5F5F5;
}
.news_block img {
padding: 20px;
background:blue;
width:90px;
height:90px;
float:left;
margin:0 20px 10px 0;
}