BluePrint BluePrint - 1 year ago 36
HTML Question

Text is not being placed besides image

I want to align an image beside a text. But for some reason, all I trye makes the text either wrap around the image or be placed below it. This is my current code:

.cc-testimonial-quote {
font-style: italic;
font-weight: 600;
max-width: 700px;
display: block;
margin: 0px auto;

img {
height: 16px;
margin-right: 20px;

div {
display: inline-block;
height: 100%;

<div class="container box">
<div class="row">
<div class="cc-testimonial-quote">
<div><img src="/src/to/img.jpg"></div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

At the moment, the text is place below the image. I have also tried

  • div tag gets
    - places text below image

  • replacing div with span - wraps text around image

  • replacing div with span and adding
    to spans - places text below image

  • removing div tag around image and text - wraps text around image

  • float:left;
    on only div with image - wraps text around image

  • float:left;
    on div with image and
    on div with text - places text below image

  • adding
    display: inline-block;
    to img tag - places text below image

Note that the
classes comes from Bootstrap. Can that affect it somehow?

Searching has not found me a solution other than the ones I've tried before, but I might have overlooked some solution posted here before.

Answer Source

You could use display: table-cell on divs inside cc-testimonial-quote DEMO

.cc-testimonial-quote > div {
  display: table-cell;