How do I correctly fromat this div's contents?

Tags: html,css

Problem :

I'm trying to improve my basic design "skills". I'm attempting to recreate this: http://i.imgur.com/WbXsILe.png but I don't know how to format it correctly with the right css.

HTML

<div class="container">
<img class="cover" src="book.png" width="45" height="60"/>
<h3>Title of Something</h3>
<p> Cracking the code </p>
<img class="icon" src="icon.png" width="45" height="40"/>
</div>

CSS

.container {
width: 40%;
height: 107px;
background: #fff;
position: relative;
}

.cover {
position: absolute;
left: 10px;
top: 5px;
}

.icon {
position: absolute;
right: 10px;
bottom: 10px;
}

#container h3, p {
color: #000;
position: absolute;
left: 60px;
top: 15px;
margin: 5px;
}

Any suggestions?

---

Solution :

Here is the way to fix the issue, your html working fine only the css need to be edit.

CSS

.container {
width: 40%;
height: 107px;
background: #fff;
position: relative;
    float:left
}

.cover {
position: absolute;
left: 10px;
top: 5px;
}

.icon {
position: absolute;
right: 10px;
bottom: 10px;
top: 15px
}

h3, p {
color: #000;
position: relative;
left: 60px;
top: 15px;
margin: 5px;
}

DEMO