Wrapping some, but not all, text around an image

Question

I'm trying to get a layout similar to this one below: The problem is that I can't seem to get the headline to not wrap but the paragraph to wrap. Here's what I've tried so far:

• Floating. I've floated the image right, but that wraps everything. Tried floating the text left, that didn't seem to fix the issue. Tried white-space nowrap, this was very close, only I couldn't set a width at all to the headline so it just fell off the page.
• Fixed paragraph width. Setting a fixed width to the paragraph doesn't work because I need it to wrap below the image. I also can't do to paragraphs, as I need this to be responsive and not have a gap between the two paragraphs as the text expands horiztonally to fill more space.
• Contenteditable = true. I used a combination of an empty container set to the size of the image and to float and contenteditable = "true" on the paragraph. This by far got me to the closest outcome, although I ended up in trouble because I have a series of about 4 blocks of these on a page, each with a different amount of content. This meant that placing the float container directly over the image is nearly impossible. To keep the wrap, as well, I can't set the container to position: absolute. Also, the container has to be directly next to the paragraph to work, which makes positioning that much more challenging.

I think I either need a solution to get that container div to always be in the exact same place as the image, or a solution to wrap the paragraph but not the header. I'm open to any and all solutions at this point. Here's a sample of what the DOM looks like for each one of these sets:

<div class="box"> <!-- container for the chunk -->
        <img src="" />
        <div class="box-txt"> <!-- container for the text so that I can position it on top of the image -- I've tried removing this and run into more positioning challenges -->
            <h2>This is the headline that shouldn't wrap.</h2>
            <div class="imgblock"></div> <!-- this element empty and set to float -->
            <p contenteditable="true">This is the paragraph that I need to wrap.</p>
        </div>
    </div>

Answer 1

You simply have to position the floated element directly before the text block, after the header (as you already did in your code example). Then a float: right; will work the way you describe it:

 .box { width: 600px; }.imgblock { width: 300px; height: 300px; background: #ddd; float: right; }

 <div class="box"> <.-- container for the chunk --> <img src="" /> <div class="box-txt"> <.-- container for the text so that I can position it on top of the image -- I've tried removing this and run into more positioning challenges --> <h2>This is the headline that shouldn't wrap.</h2> <div class="imgblock"></div> <.-- this element empty and set to float --> <p contenteditable="true">This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap.</p> </div> </div>