How to position these images in CSS?

Question

I have some trouble positioning 2 images next to some reviews in CSS.

This is what my reviews are supposed to look like:

This is what it looks like right now:

How can I position the first line of this text next to the images? I've tried to put the text in a paragraph, that will end up with the first line being below the author image. Now I've tried to put the text in a div, but that'll end up like in the 2nd picture.

This is the code I've used for my reviews:

<div id="recensies_order">
    <div class="reviews item1"><img style="margin-right:10px;" src="quotes.png" alt="quote" /><img src="author.png" alt="authorpic" /> <span>In één woord ge-wel-dig! Mooie designs en een super service. Logodealxxx heeft ons versteld doen staan van hun diensten. Wij raden iedereen dit bedrijf aan! </span></div>
    <div class="reviews item2"><img style="margin-right:10px;" src="quotes.png" alt="quote" /><img src="author.png" alt="authorpic" /> <span>In één woord ge-wel-dig! Mooie designs en een super service. Logodealxxx heeft ons versteld doen staan van hun diensten. Wij raden iedereen dit bedrijf aan! </span></</div>
    <div class="reviews item3"><img style="margin-right:10px;" src="quotes.png" alt="quote" /><img src="author.png" alt="authorpic" /> <span>In één woord ge-wel-dig! Mooie designs en een super service. Logodealxxx heeft ons versteld doen staan van hun diensten. Wij raden iedereen dit bedrijf aan! </span></div>
</div>

#recensies_order {
color: #ACACAB;
font-size: 16px;
font-style: italic;
}

Answer 1

The term you are looking for is floating.

In your scenario the following should work (untested):

<div id="recensies_order">
    <div class="reviews item1">
       <img style="margin-right: 10px;" src="quotes.png" alt="quote" style="float: left" />
       <img src="author.png" alt="authorpic" style="float: left" />
       <span>In één woord ge-wel-dig! Mooie designs en een super service. Logodealxxx heeft ons versteld doen staan van hun diensten. Wij raden iedereen dit bedrijf aan! </span></div>
</div>

Of course those style additions, should be moved into your CSS file later.

JsFiddle Demo

Answer 2

add float: left; to all your images

Answer 3

There must be other code affecting the spans. You're code is fine. Images and spans are inline by default so it should do what you're after. You can do it with floats but they are not needed.

Here's a pen with your code, floated images and images set to inline-block. http://codepen.io/anon/pen/pmJhL

Answer 4

#recensies_order {
color: #ACACAB;
font-size: 16px;
font-style: italic;
width:400px;
}
#recensies_order img{
    float:left;
    clear:right;
    margin:10px;
}
#recensies_order img+img{
    width:64px;
}

.reviews{
    width:100%;
    display:block;
    padding-bottom:10px;
}

JSFIDDLE DEMO

change the with and you have this:

#recensies_order {
color: #ACACAB;
font-size: 16px;
font-style: italic;
width:300px;
}
#recensies_order img{
    float:left;
    clear:right;
    margin:10px;
}
#recensies_order img+img{
    width:64px;
}

.reviews{
    width:100%;
    display:block;
    padding-bottom:10px;
}

JSFIDDLE DEMO 2