CODEWITHSUNDEEP
htmlcss
jessiebower
jessiebower

Reputation: 5

Text not wrapping around image in div

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:

Current resultDesired result

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>

Upvotes: 0

Views: 180

Answers (2)

Unbywyd
Unbywyd

Reputation: 966

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

Upvotes: 1

Ahmad Dalao
Ahmad Dalao

Reputation: 2056

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 :

result

Upvotes: 0

Related Questions