Two inline blocks: place text next to an image - css

Question

I have problem with 2 inline blocks. I want create something like this:
<img>
<span>some long text next to the img</span>
I have following structure (which I have to use):
<div class="mainContainer">
<div class="additional">
<div class="description">
<img></img>
</div>
<div class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>
</div>
</div>
Styles:
.mainContainer {
height: 15px; } //doesn't matter in this case
.additional {
line-height: 15px; } //doesn't matter in this case
.description {
float: left;
display: inline;
}
The problem is when I want add long text, then image is above the text, but it should be next to it.
It should be something like this (I add on code but it has to be removed):
http://jsfiddle.net/476fm/
Any suggestions?
EDIT:
Ok actually the text above was only example and to be more specific what I want achieve:
I have one main container which contains 2 inline elements:
- first element have image
- second have image too and the text
and what I wanna do is: when the text is long and need to be in second line it shouldn't be underneath the first image
http://jsfiddle.net/z2t7b/ - it should be fixed
(I hope that somebody understood what I wanna do )

Answer 1

Is this what you are trying to accomplish?
<div class="mainContainer">
<div class="additional">
<div class="description">
<img></img> <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</br> sed do eiusmod tempor incididunt ut labore</div>
<div class="breaker"></div>
<img></img><div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</br> sed do eiusmod tempor incididunt ut labore</div>
</div>
</div>
</div>
.mainContainer {
height: 23px;
}
.additional{
line-height: 23px;
}
.description {
float:left;
display: inline;
}
.breaker {clear: both;}
img {
background-color:#FFF;
width:20px;
height:20px;
display:inline-block;
border:solid black 1px;
float:left;
}
Here is the fiddle

Answer 2

Well, for INLINE elements, just remove the 'float:left' .. Natural inline flow will apply, THEN, your text will pass under normally.
OK, now i understook your quest (i hobe)
just make your container behave has a block, float it left and add overflow: hidden;
http://jsfiddle.net/NgfSF/
.description {
padding-right:10px;
float:left;
display: inline;
}
.description1 {
display: block;
overflow: hidden;
}