MattSull MattSull - 7 months ago 448
HTML Question

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

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.

Answer

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.

Comments