Text flow beneath image css

Question

I am new here. I have a slight problem with this area. I have a background image with a picture at the bottom right and in my PSD, I want to make the text look like this: Original

but currently in my code, it looks like this:Current

As you can see, the text actually flows beneath the div without automatically breaking line. Appreciate if there's any solution to this, thanks in advance!

I have two separate images. One is for the background image (Full cyan background) and another one is the ipad image which is positioned absolute and also positioned to the bottom right of the background image.

HTML:

 <section id="ipadsection">
    <div class="container fluid bgimage">

        <div class="blockoftext">
                    Lorem ipsum dolor sit amet, consectetur adipisicing 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.
                    Lorem ipsum dolor sit amet, consectetur adipisicing 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.
            Lorem ipsum dolor sit amet, consectetur adipisicing 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.
            Lorem ipsum dolor sit amet, consectetur adipisicing 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.      

           <div class="ipadimg">
                <img src="assets/img/ipad.jpg" alt="ipad">
           </div>
        </div>
    </div>
  </section>

CSS:

.bgimage {      
  background: url('../img/backgroundipad_03.jpg');
  height: 400px;
  background-size: cover;
  position: relative;
}
.blockoftext {
  float: left;
  text-align: left;
}
.ipadimg {
  position: absolute;
  bottom: 0px;
  right: 0px;
  float: right;
  margin-bottom: 1px;
  width:50%;
}

Could you please make a fiddle demo. So would be easier for us to solve the problem.. You can do.. class .ipadimg don't make it position absolute instead make it `float:right;` then text will wrap. — Ganesh Yadav, Apr 09 '16 at 07:24
The text is not “bleeding into” the image – the image is _covering up_ parts of the text, _because_ you positioned it absolutely. Absolute positioning takes an element out of the normal layout flow, meaning it doesn’t influence the position and layout of other elements any more. — CBroe, Apr 09 '16 at 07:37
I tried to float right, but it becomes like this : ![Valid XHTML](http://i.imgur.com/HsC3DKh.png?1). @locateganesh — loveprogramming, Apr 09 '16 at 07:51
Possible duplicate of [How can I wrap text around a bottom-right div?](http://stackoverflow.com/questions/499829/how-can-i-wrap-text-around-a-bottom-right-div) — Asons, Apr 09 '16 at 10:07

Asons · Accepted Answer · 2016-04-09T08:36:32.650

The main problem with your existing code is the position: absolute you used and that the image element weren't placed correct in the markup.

As the <div class="ipadimg"> div (and its CSS rule) isn't necessary I removed that, moved the img before the last paragraph and added this new rule.

.blockoftext img {
  float: right;
}

Stack snippet

.blockoftext {
  float: left;
  text-align: left;
}
.blockoftext img {
  float: right;
}

<div class="blockoftext">
  Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  Lorem ipsum dolor sit amet, consectetur adipisicing 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.
    <img src="http://www.placehold.it/300x150" alt="ipad">
  Lorem ipsum dolor sit amet, consectetur adipisicing 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.      

</div>

Update based on comment

Here is the text splitted into to 2 groups. The down side is that the user, which can edit the text, need to know it has to be splitted so a part of the text will wrap around the image.

Side notes:

I personally would solve this issue by making a text template and then measured the newly edited text and then injected the floated image into it. (can't make a sample how-to though, as I'm not using WordPress)

If users are allowed to edit the text, it might be appropriate to let them change image as well. Their text might say something that is not accurate with the existing one

.blockoftext, .blockoftext-withimg {
  float: left;
  text-align: left;
}
.img-right {
  float: right;
}

<div class="blockoftext">
  Lorem ipsum dolor sit amet, consectetur adipisicing 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.
  Lorem ipsum dolor sit amet, consectetur adipisicing 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.
</div>

<div class="blockoftext-withimg">
  <img class="img-right" src="http://www.placehold.it/300x150" alt="ipad">
  
  <span class="txt-left">
  Lorem ipsum dolor sit amet, consectetur adipisicing 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.
    </span>
</div>

This is the closest so far to fixing it but the problem is, I am converting this into wordpress and I want to be able to make the block of text a custom field that someone else can edit. If i convert that into a custom field, the image will still be underneath the block of text. — loveprogramming, Apr 09 '16 at 07:59
@loveprogramming Then you need to make it 2 custom fields, one with an image, one without. Will update my answer in a sec. with a second markup structure. — Asons, Apr 09 '16 at 08:03
@loveprogramming Updated. Just to clarify, the floated image can't be place in the end and give the wanted text flow (or at least what I know). I will investigate this some more and if there will be one, I'll update my answer and notify you. — Asons, Apr 09 '16 at 08:47
@loveprogramming This issue has been asked before and here is one more solution: http://stackoverflow.com/questions/499829/how-can-i-wrap-text-around-a-bottom-right-div — Asons, Apr 09 '16 at 10:08

score 0 · Answer 2 · answered Apr 09 '16 at 07:34

The float property in CSS is all you need to create text that 'wraps around' your image. This creates an image that is positioned within the text-flow of your document, but 'floated' to the left, or to the right.

"Floating" is ignored if you used a specific type of element positioning, like position: absolute. When you use absolute positioning, the picture is actually taken out of the document flow, and placed on a 'layer' of its own - and this is why it's showing on top of your text. In order to get your layout to work, you may need to do the following:

remove the absolute positioning from the picture
do not float the text - place the text as normal inline content.
place the picture within the text, and float it to the right.

You can find out more about floating pictures here:

http://www.w3schools.com/css/css_float.asp

Text flow beneath image css

2 Answers2