Styling list as float next to image - html

Question

How do I achieve this layout from this list:
<ul>
<li id="item1">
<span><img src="..." /></span>
<ul id="description">
<li class="line1">This is the first line</li>
<li class="line2">This is the second line</li>
<li class="line3">This is the third line</li>
</ul>
</li>
</ul>
I tried the float approach but it's not doing it
span {
float:left;
width:14em;
height:14em;
}
#description {
float:right;
width:20em;
margin-left:3em;
}

Answer 1

Here is how I got it with CSS you can edit to your liking: http://jsfiddle.net/theStudent/f69UG/3/
CSS
ul{
list-style:none;
margin: 0;
width: 40em;
}
span {
float:left;
width:14em;
height: 14em;
height:14em;
background: red;
}
#description {
float:right;
width:20em;
min-height: 14em;
margin-left:3em;
color:#000;
}
#description > li{
height: 4.5em;
}
HTML
<ul>
<li id="item1">
<span><img src="..." /></span>
<ul id="description">
<li class="line1">This is the first line</li>
<li class="line2">This is the second line</li>
<li class="line3">This is the third line</li>
</ul>
</li>
</ul>

Answer 2

Don't float the list, just the image(it has same behavior as floating an image in a paragraph, the text will wrap after the image). Example here: http://jsfiddle.net/Lqw53/

Answer 3

In this solution I'm using the <img> tag's attribute of align to align the image to the left, then the rest of the text will flow to the right.
So we have our HTML:
<div>
<img src="http://graph.facebook.com/1126016138/picture?type=large" align="left" />
<ul id="description">
<li class="line1">This is the first line</li>
<li class="line2">This is the second line</li>
<li class="line3">This is the third line</li>
</ul>
</div>
Then our CSS, as bullet points aren't considered by HTML when considering spacing:
#description {
list-style:none;
}
Here is a jsFiddle if you want to have a look: jsFiddle

Answer 4

ul and img are block elements so you need to change their display type to inline-block to make sure they align horizontally
<ul>
<li id="item1">
<span><img src="..." /></span>
<ul id="description">
<li class="line1">This is the first line</li>
<li class="line2">This is the second line</li>
<li class="line3">This is the third line</li>
</ul>
</li>
</ul>
CSS
ul, img{
display: inline-block;
}
img {
float:left;
width:14em;
height:14em;
}
ul{
list-style-type: none;
}
li{
margin-bottom: 75px;
}
#description {
float:right;
margin-left:3em;
margin-top: 5px;
}
JSFiddle

Answer 5

You can check this :
Fidle Link here
ul{
list-style:none;
margin: 0;
padding:0
}
#item1 span {/*Span take width and height as per your image size.*/
float:left;
display:inlne-block;
margin-right:20px;
}
#description {
float:left;
color:#333;
margin-top:10px;
}
#description li{
line-height:20px;
display:block;
padding-bottom:10px;
}
Good Luck...