How do I correctly fromat this div's contents? - html

Question

I'm trying to improve my basic design "skills". I'm attempting to recreate this:
but I don't know how to format it correctly with the right 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;
}
<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>
Any suggestions?

Answer 1

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

Answer 2

here is a very simple solution: http://codepen.io/elstermann/pen/oXRVxG
HTML
<header>
<img id=img-book alt=book src=http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png width=158 height=158>
<div id=title>
<h3>Title of Something</h3>
<p id=h1-sub>Title of Something</p>
</div>
<img id=img-face alt=book src=http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png width=158 height=158>
</header
CSS
header {
margin: 0 auto;
max-width: 950px;
min-width: 500px;
width: 90%;
}
#img-book, #title {
float: left;
}
#img-face {
float: right;
}