BluePrint BluePrint - 2 months ago 6
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>
</div>
</div>
</div>







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


  • div tag gets
    float:left
    - places text below image

  • replacing div with span - wraps text around image

  • replacing div with span and adding
    display:inline-block;
    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
    float:right;
    on div with text - places text below image

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



Note that the
container
,
box
and
row
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

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

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