Text not wrapping around image in div

Question

I am trying to make it so the text in my div wraps around my image that is within its own div.

It currently looks like the image on the left but I want it to look like the image on the right:

Here is my HTML & CSS:

#nativeadvertisement {
  background-color: #f5f5f5;
  width: 293px;
  height: 595px;
  border-style: solid;
  border-color: #dddddd;
  border-width: thin;
  position: relative;
}

#nativeheader {
  color: #005799;
  font-weight: bold;
  font-family: "Roboto Condensed", "Helvetica Neue";
  font-size: 1.5rem;
  margin: 15px;
}

#nativeimagedesktop {
  width: 260px;
  height: 260px;
  background-color: #fff;
  object-fit: cover;
  border: 4px solid #fefefe;
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(10, 10, 10, .2);
  display: block;
  margin: 13px;
}

#nativetagline {
  margin: 15px;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 0.9rem;
  color: #333;
  overflow: hidden;
  font-style: italic;
}

#nativebodytextextended {
  margin: 15px;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 0.9rem;
  color: #333;
  overflow: hidden;
  float: left;
}

#nativelogo {
  float: right;
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-style: solid;
  border-color: #dddddd;
  border-width: thin;
  display: inline-block;
  margin-right: 12px;
  position: absolute;
  bottom: 10px;
  left: 200px;
}

#nativesponsored {
  float: right;
  position: absolute;
  left: 225px;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 0.8rem;
  color: #333;
  font-weight: bold;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

#nativelogoimg {
  float: right;
  width: 80px;
  height: 80px;
  object-fit: cover;
  display: inline;
}

#nativeCTA {
  margin: 15px;
  font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  font-size: 0.9rem;
  color: #333;
  overflow: hidden;
  font-weight: bold;
  position: absolute;
  bottom: 0;
}

    <html>
    <link rel="stylesheet" type="text/css" href=nativemcncss.css>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap" rel="stylesheet"><a href=%%CLICK_URL_UN

ESC%%[%NativeClickthoughURL%] target="_blank">
<div id="nativeadvertisement">
<div id="nativesponsored">Sponsored</div>
<div id="nativeheader">[%NativeHeadline%]</div>
<div id="nativetagline">[%NativeTagline%]</div>
<div id="nativeimagedesktop"><img src="[%NativeImageDesktop%]"alt="Native Image"></div>
<div id="nativebodytextextended">[%NativeBodyTextExtended%]Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you.<br><br> Hello, nice to meet you. Hello, nice to meet you, Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to
</div>
<div id="nativelogo"><img id="nativelogoimg" src="[%NativeLogo%]" alt="Native Logo"></div>
<div id="nativeCTA">[%NativeCTA%]</div>
</div></a>
</html>

could you please provide an example where this actually happens? — Christoph, Aug 20 '20 at 14:11
Can you post an example with text instead of the template tags so we can see the issue? — j08691, Aug 20 '20 at 14:14
https://www.motorcyclenews.com/?google_preview=ZNc_N0qVbBMYz4_6-QUwz6uvgQaIAYCAgKCXt4j3Sg&iu=24156345&gdfp_req=1&lineItemId=5454346051&creativeId=138321017017 here is a preview page, shows up as an ad @Christoph — jessiebower, Aug 20 '20 at 14:25
Amended code snippet @j08691 also provided live test link above — jessiebower, Aug 20 '20 at 14:29
Please always include all the code as a self-contained example. Obviously you are using a float, but at the same time using absolute positioning, which negates the effects of the floating. Remove the positioning and you'll be fine. — Christoph, Aug 20 '20 at 14:38
@Christoph unfortunately, removing the absolute positioning just sends it outside of the div (and this includes after removing the right and bottom positioning too). doesn't wrap it — jessiebower, Aug 20 '20 at 14:41
Yes, that's because you have a fixed height defined on your container, and the content of the container exceed this height... if the "Hello nice to meet you" content should wrap around the container it would not fit into the container anyway. — Christoph, Aug 20 '20 at 14:57
Thanks @Christoph that makes sense now. Although the text doesn't wrap the image properly still like I want it to in the mock up above (even with the margins on #nativebodytextextended removed). Any help with that please? — jessiebower, Aug 20 '20 at 15:26

Unbywyd · Answer 1 · 2020-08-20T17:43:55.040

1

Your problem is that you cannot use absolute positioning together with floating, and must also be in the same block with the text, and this question is similar to this

in addition, see also: Floating an image to the bottom right with text wrapping around

edited Aug 20 '20 at 17:43

answered Aug 20 '20 at 14:34

Unbywyd

856
1
4
8

Hey, thanks for answering. Unfortunately just using one or the other does not make the text wrap my image so using both was an element of experimenting (I am quite new still). If I use float: right only then it just positions the image outside the #nativeadvertisement div – jessiebower Aug 20 '20 at 14:46

score 0 · Answer 2 · answered Aug 20 '20 at 15:56

I think Unbywyd solution was great. but apparently you want something else. Try this.

Add the text in the div to a <P> and use calc method to make the <p> width shorter and you will be able to fit the image without any issues.

CSS file changes:

#nativelogo {
    border-style: solid;
    border-width: thin;
    position: absolute;
    bottom: 10px;
    left: 200px;
    margin-right: 15px;
}

#nativesponsored {
    float: right;
    position: absolute;
    left: 225px;
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
    font-size: 0.8rem;
    color: #333;
    font-weight: bold;
}

and here is the HTML changes I made

 <a ESC%%[%NativeClickthoughURL%] target="_blank">
        <div id="nativeadvertisement">
            <div id="nativesponsored">Sponsored</div>
            <div id="nativeheader">[%NativeHeadline%]</div>
            <div id="nativetagline">[%NativeTagline%]</div>
            <div id="nativeimagedesktop"><img src="[%NativeImageDesktop%]" alt="Native Image"></div>
            <div id="nativebodytextextended">
                <p>
                    [%NativeBodyTextExtended%]Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you, Hello, nice to meet you.
                </p>
                <p style="width: calc(100% - 80px);"> Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to
                </p>
                <div id="nativelogo"><img id="nativelogoimg" src="[%NativeLogo%]" alt="Native Logo"></div>
            </div>
            <div id="nativeCTA">[%NativeCTA%]</div>
        </div>
    </a>

and here is how it looks :

Hey Ahmad, thank you for this, it looks exactly how I want it but the text in the section will vary in length ultimately as it is using a placeholder for advertising, so I couldn't amend it based on the 'hello nice to meet you' stuff (that text was just for demonstration purposes). All I need is it to automatically wrap around the logo and look decent. (and I need that logo to stay exactly where it is in the bottom right) — jessiebower, Aug 20 '20 at 16:10
Fair enough buddy. I Will see if I can help more and update my answer accordingly. — Ahmad Dalao, Aug 20 '20 at 16:19

Text not wrapping around image in div

2 Answers2