CODEWITHSUNDEEP
htmlcss
cal
cal

Reputation: 47

Display text next to img in div

I have a div which contains an img, p tag and h6 text. I want to float the text on the right side of the picture and not wrap it under.

I have tried floating left and right and clearing, displaying inline-block on div and floating img, but I cannot get it to look right. 

<div class="col">
  <img src="images/homepage-blue-icon.png" class="body-img" title="Me" alt="Me" align="left" />
  <h6>Blueberries</h6>
  <p>Healthy and nutritious</p>
</div>

Upvotes: 0

Views: 2122

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105853

there is a few ways:

float and margin

h6,
p {
  margin :0 0 0 55px;
}

.body-img {
  float: left;
}
<div class="col">
  <img src="http://lorempixel.com/50/50/" class="body-img" title="Me" alt="Me" />
  <h6>Blueberries</h6>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
</div>

float and padding

h6,
p {
  padding :0 0 0 55px;
}

.body-img {
  float: left;
}
<div class="col">
  <img src="http://lorempixel.com/50/50/" class="body-img" title="Me" alt="Me" />
  <h6>Blueberries</h6>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
</div>

display:grid a tutorial among others : https://css-tricks.com/snippets/css/complete-guide-grid/ 

.col {
display:grid ;
grid-template-columns:60px 1fr;
}
.col> * {
grid-column:2;
}
.col img {
grid-column:1;
grid-row:1/span 2;
}
<div class="col">
  <img src="http://lorempixel.com/50/50/" class="body-img" title="Me" alt="Me" />
  <h6>Blueberries</h6>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
</div>

display:table/table-cell; if you wrap the image . it can allow vertical-alignement too, hover the image to see it align in the middle.

.col {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.left {
  display: table-cell;
  width: 60px;
  vertical-align:top;
}

.left:hover {
  vertical-align: middle;
}
<div class="col">
  <div class="left"><img src="http://lorempixel.com/50/50/" class="body-img" title="Me" alt="Me" /></div>
  <h6>Blueberries</h6>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
  <p>Healthy and nutritious</p>
</div>

Upvotes: 1

user5063151
user5063151

Reputation:

Perhaps you can put them into a table with one row?

<table>
  <tr>
    <td>
        <img style='' src="img.jpg" class="body-img" title="Me" alt="Me" align="left" />

    </td>

    <td>
      <div>
        <h6>Blueberries</h6>
        <p>
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit,
          sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat. Duis aute irure dolor in reprehenderit in voluptate
          velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
          occaecat cupidatat non proident, sunt in culpa qui officia deserunt
           mollit anim id est laborum."
        </p>
      </div>
    </td>
  </tr>
</table>

Upvotes: 0

Related Questions