CODEWITHSUNDEEP
htmlcssimage
Anonymous Man
Anonymous Man

Reputation: 3056

Wrapping a div of text to the left of an image that is outside the div

It seems like this should be very simple but I can't get it to work.

It works fine when the image is floated left, the following div of text will begin to the right of the image and wrap as desired.

However, when the image is floated to the right, I can't get the text to float left and then wrap under the image.

THIS WORKS

.left-image {
    float: left;
}
<div class="left-image"><img...></div>
<div class="right-text">...</div>

THIS DOES NOT WORK - text appears below image only

.right-image {
    float: right;
}
.left-text {
    float: left;
}
<div class="right-image"><img...></div>
<div class="left-text">...</div>

THIS DOES NOT WORK - image appears below text

.right-image {
    float: right;
}
.left-text {
    float: left;
}
<div class="left-text">...</div>
<div class="right-image">...</div>

I know it could work if the image was in the same div with the text, but that is not an option as these are separate fields in a Drupal content type.

Limiting the width of the text div is not helpful because that prevents the text from wrapping under the image to fill the width of the page.

Suggestions?

Upvotes: 0

Views: 117

Answers (2)

Johannes
Johannes

Reputation: 67778

Don't put the images inside a separate <div>, but simply assign your floating classes to the <img> tags themselves. And also don't put the text in a separate div, but write it in one container together with the <img> tag (often this will be a <p> tag, as in my codepen example linked below).

DIVs are block elements by default - if you float them to any side, the subsequent div will be placed below it, unless it's also floated and both of them together are not wider than the surrounding container. (The same goes for <p> tags, BTW).

Here's a codepen showing a simple example: http://codepen.io/anon/pen/bEZYbO

Upvotes: 0

Sarin K
Sarin K

Reputation: 70

Place your image before the text and remove float:left, based on your example

.right-image {
  float: right;
}
.left-text {
  float: none;
}
<div class="right-image">...</div>
<div class="left-text">...</div>

Here is a jsfiddle showing it working

https://jsfiddle.net/sarin/jtw721se/

Upvotes: 2

Related Questions