Float text right even when text falls below image

I have an image with text right next to it floating. It works fine for large desktop. But when I reduce device dimensions then the text does not float nicely vertically anymore. Basically, the text goes below the image and takes the full line. How to get the text always to float right (vertically aligned nicely) regardless device dimensions / image height?? I have Bootstrap template, so responsiveness is key to my site. I know I can make my image bigger, but that doesn´t fit the layout of my site.

My Fiddle… Fiddle

HTML:

  <div class="wrapper">
        <div class="img"><img alt="" src="http://placehold.it/150x150"></div>

        <div class="model">
            Mercedes
        </div>

        <div class="description">
            the best the best the best the best the best the bestthe best the best the bestthe best the best the bestthe best the best the bestthe best the best the bestthe best the best the bestthe best the best the bestthe best the best the best bestthe best the best the bestthe best the best the bestthe best the best the bestbestthe best the best the bestthe best the best the bestthe best the best the best
        </div>
    </div>

CSS:

.img {
    height:75px;
    width:75px;
    padding:0 0 5px 45px;
    position:relative;
    word-wrap:break-word;
    float:left;
    display:inline-block
}

.img img {
    max-width:100%;
    max-height:100%;
    left:0;
    position:absolute;
    margin-top:17px
}

.model {
    font-size:12px;
    color:#5A5A5A;
    padding:0 0 10px 55px;
    width:100%
}

.description {
    font-size:14px;
    margin-top:10px;
    font-weight:400
}


Source: css3

Leave a Reply