Search code examples
htmlcsspositioning

How to position these images in CSS?

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

This is what my reviews are supposed to look like:

enter image description here

This is what it looks like right now:

enter image description here

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;
}
Solution

  • 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