Aligning an image to the left with div's to the right

Question

I'm having issues making the image float to the right whilst the rest of text and the div float to the right.

I can get it to work with a fixed width image but then if I swap the image for a slightly different size it won't work as I'm using fixed sizes. Is there a way for it to work when I don't know the size of the image? Or would I need to use JS for this?

http://jsfiddle.net/agcH5/

<div style="width:900px">
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">Course Name</h3>
    </div>
    <div class="panel-body">
        <img src="http://i.imgur.com/TyQ45nk.jpg">
        <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed porttitor diam. Quisque fermentum orci sed velit lacinia, nec vehicula eros consequat. Morbi vestibulum convallis auctor.</p>
        <div class="container-fluid row">
            <div class="col-md-9" style="padding: 0">
                <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                        80%
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <a href="#" class="btn btn-sm btn-danger">Continue</a>
            </div>
        </div></div>
    </div>
</div>
</div>

Answer 1

Simply make use of the boostrap's grid classes properly. I edited the code in your div with class panel-body

   <div class="panel-body">
      <div class="col-md-6">
        <img src='http://i.imgur.com/TyQ45nk.jpg'>
      </div>
      <div class="col-md-6">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed porttitor diam. Quisque fermentum orci sed velit lacinia, nec vehicula eros consequat. Morbi vestibulum convallis auctor.</p>
        <div class="progress">
                    <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
                        80%
                    </div>
                </div>
        <a href="#" class="btn btn-sm btn-danger">Continue</a>
      </div>
    </div>

Demo : http://jsbin.com/gamaj/1/

Answer 2

You can try using either CSS or an inline style attribute:

<img src="http://i.imgur.com/TyQ45nk.jpg" style="float:right">

if you don't want words on the same line as the image, you can add the 'clear:right' attribute as well.

Answer 3

You can add float: left to image

.panel-body img{
    float: left;
    margin: 0 0 10px 0;   
}

.rightContent{
    margin-left: 380px;
}

Check this Demo