Clever Geek Handbook

Float text to the right, even if the text falls below the image

I have an image with text next to it floating. It works great for a large desktop. But when I downsize the device, the text no longer floats vertically. Basically, the text goes below the image and takes up a full line. How do I make the text always float to the right (vertically aligned well) regardless of device dimensions / image height? I have a Bootstrap template so responsiveness is key to my site. I know I can increase my size, but it 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
}
+3


source to share


3 answers


You said you are using bootstrap. Why not use a media object instead of generating additional css?

Read this for reference: http://getbootstrap.com/components/#media

See this snippet.



<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="media">
      <div class="media-left">
         <img src="http://placehold.it/150x150" >
      </div>
      <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
         Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
         Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
Run codeHide result


+2


source


Update fiddle

Removed display:inline-block

as it doesn't work withfloat

added bottom margin

to translate text down



.img {
  height: 75px;
  width: 75px;
  padding: 0 0 5px 45px;
  position: relative;
  word-wrap: break-word;
  float: left;
  margin: 0 0 35px 0;
}
.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
}
      

        
        
        
      

    
<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>
Run codeHide result


0


source


In this case, use <table>

. This makes it pleasant and clean. Stucture:

<table>
    <thead>
        <tr align="middle">
            <td colspan="2">Title</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td valign="top">
                <img src="#">
            </td>
            <td valign="top">
                text
            </td>
        </tr>
    </tbody>
</table>

There are two columns , so the colspan must be 2 to span the full width of the table and center the text align="middle"

. And valign means vertical alignment, so img and text are always on top .

Demo

0


source






More articles:


All Articles