css make image and text left to right - html

Question

I want to make an image in the left and the text on the right.
This is a jsfiddle
http://jsfiddle.net/VnnZ2/
I put the image in a div with class imageClass and I put the text in a div with class information and I gave the imageClass left float and the information right float.
I also tried to make this:
display: inline-block;
for both classes but still the result as you see in the jsfiddle.
I tried the same css with label and input and it works but I don't know why it is not working with div and div.
Plus, I already give the imageClass a width 200 and the informaton class a width 300 and the ul width 500px so I tried all what I could
Update 1
Sorry I gave you the wrong jsfiddle by mistake, this is the correct one http://jsfiddle.net/VnnZ2/9/

Answer 1

Check this updated code
HTML:
div class="allRestaurants">
<ul>
<li>
<div class="imageClass">
<img src="https://www.google.com/images/srpr/logo11w.png"/>
</div>
<div class="information">
nameres </div>
</li>
</ul>
<ul>
<li>
<div class="imageClass">
<img src="https://www.google.com/images/srpr/logo11w.png"/>
</div>
<div class="information">
Zuma 2 </div>
</li>
</ul>
</div>
CSS:
.allRestaurants{
background-color: #376b66;
width:100%;
float:left;
}
.allRestaurants ul{
margin: 10px;
padding: 0;
width: 600px;
background-color: #ffffff;
margin-left: 10px;
width:90%;
overflow:auto;
}
.allRestaurants ul li{
margin-bottom: 10px;
list-style: none;
box-sizing: border-box;
border-radius: 10px;
-webkit-border-radius: 10px;
}
.allRestaurants ul li .imageClass{
float: left;
}
.allRestaurants ul li .imageClass img{
width: 200px;
height: 200px;
}
.allRestaurants ul li .information{
width: 250px;
}
.allRestaurants ul li{
float:left;
clear:both;
}
Updated JS FIDDLE CODE

Answer 2

You need to clear your floats to stop the parent element collapsing. There are a number of ways. This is probably the simplest to understand:
WORKING DEMO
<li>
<div class="imageClass">
<img src="https://www.google.com/images/srpr/logo11w.png"/>
</div>
<div class="information">nameres</div>
<div class="clearfix"></div> /* Add an empty element with class .clearfix */
</li>
In your CSS:
.clearfix {
clear: both;
}
Or this method:
WORKING DEMO
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
Where the clearfix class would be applied to the parent element(li)

Answer 3

Add overflow: auto; to .allRestaurants ul li, that way the li will know that there are elements inside it that float.
Also, check this updated Fiddle.