CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Rlweb
Rlweb

Reputation: 79

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

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>

Upvotes: 0

Views: 61

Answers (3)

Nishant Srivastava
Nishant Srivastava

Reputation: 4791

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/

Upvotes: 1

amol
amol

Reputation: 1555

You can add float: left to image

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

.rightContent{
    margin-left: 380px;
}

Check this Demo

Upvotes: 0

Hongyi Li
Hongyi Li

Reputation: 1069

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.

Upvotes: 0

Related Questions