CSS > Div float - css

Question

I'm trying to design a layout like:
But as you can see on here: http://codepen.io/amonello/pen/zxemxb
<ul>
<li>
<div class="picture"></div>
<div class="name">name</div>
<div class="title">title</div>
<div class="title2">title2</div>
<div class="title3">title3</div>
<div class="phone">phone</div>
<div class="email">email</div>
</li>
</ul>
I've got some trouble doing it. I have a hard time understanding the float and the display.
Could any of you point me in the right direction?
I cannot add a wrapper around name/titles and phone/email.

Answer 1

Maybe this way
http://codepen.io/kazup/pen/raPRXz
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.picture {
float: left;
width: 73px;
height: 100px;
background: gray;
border: 1px solid black;
}
.name,
.title,
.title2,
.title3,
.phone,
.email {
float: left;
clear: left;
width: 90%;
border: 1px solid green;
}
#media screen and (min-width: 600px) {
.picture {
position: absolute;
float: none;
}
.name,
.title,
.title2,
.title3 {
margin-left: 90px;
width: 35%;
}
.phone,
.email {
float: none;
clear: none;
margin-left: 55%;
width: 35%;
border: 1px solid red;
}
}
<ul>
<li>
<div class="picture"></div>
<div class="name">name</div>
<div class="title">title</div>
<div class="title2">title2</div>
<div class="title3">title3</div>
<div class="phone">phone</div>
<div class="email">email</div>
</li>
</ul>
Only the .picture has absolute positioning, divs are floated, except for the phone and email in desktop view.
Don't care about the widths of the divs, it's just nicer this way.