Align image to left of text on same line - Twitter Bootstrap3

css, html, image, twitter-bootstrap

Solution

You can use floating:

<div class="paragraphs">
  <div class="row">
    <div class="span4">
      <img style="float:left" src="../site/img/success32.png"/>
      <div class="content-heading"><h3>Experience &nbsp </h3></div>
      <p style="clear:both">Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
    </div>
  </div>
</div>

If you want the following `<p>` to stay at the same line too, remove its

style="clear:both"

but then you should add

<div style="clear:both"></div>

after it.

Problem

Currently I have a paragraph heading and an image to its right, on the same line: ``` <div class="paragraphs"> <div class="row"> <div class="span4"> <div class="content-heading"><h3>Experience &nbsp </h3><img src="../site/img/success32.png"/></div> <p>Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.</p> </div> </div> </div> ``` This works fine - the content-heading and the image are on the same line. However, when I put the image before the content-heading div, they are no longer on the same line. This is what I want to achieve - image then content-heading - on the same line.

Original source

Related problems