Cant get text to wrap around circular image

Question

I added borders to images to replace missing files. Under "day care", the circular <img> (.curve) isn't letting text wrap around it. As far as I know, I have the proper code in CSS. What is the problem?

@charset "UTF-8";

/* CSS Document */

.banner img {
  width: 100%;
  height: 300px;
  border-style: solid;
}

.badge img {
  float: left;
  width: 250px;
  border-style: solid;
  height: 150px;
}

.mission {
  padding-top: 25px;
}

body {
  margin: 0;
}

.wrapper {
  margin: auto;
  width: 1000px;
}

nav {
  background-color: #537B80;
  color: white;
  text-align: center;
}

nav a {
  padding: 15px 40px 15px 40px;
  display: inline-block;
}

img {
  display: block;
  margin: auto;
}

header p {
  width: 55%;
  float: left;
  margin: 30px 30px 0 75px;
  text-align: center;
  font-size: 20px;
}

.daycare {
  clear: both;
}

.daycare h1 {
  float: right;
  color: #537B80;
}

.daycare hr {
  float: left;
  border-width: 4px;
  border-style: solid;
  color: #dde678;
  width: 83%;
  margin-top: 36px;
}

.curve {
  width: 300px;
  height: 300px;
  float: left;
  shape-outside: circle();
  border-radius: 50%;
  margin: 15px 0 0 0;
  border-style: solid;
}

.daycare p {
  text-align: left;
  margin: 10px 0 0 7px;
  width: 65%;
  float: left;
}

<div class="wrapper">

  <header>
    <div class="banner"><img src="img/Banner.png"></div>

    <nav>
      <a>Day Care</a><a>Grooming</a><a>Spa</a><a>Self Wash</a>
    </nav>

    <div class="mission">
      <p>Every dog is unique - especially your dog! Visit Lucky's today for open play dog daycare, overnight boarding or spa services and experience personalized care and exceptional customer service. Our convenient live webcams offer a peek into your dog's
        day and peace of mind that they're having the time of their life with their canine friends and our well-trained, loving staff.</p>
      <div class="badge"> <img src="img/Badge.png"></div>
    </div>

    <div class="daycare">
      <hr>
      <h1>Day Care</h1>
      <img src="img/daycare.png" alt="daycare" class="curve">
      <p>7am: Happy dogs begin to arrive for a full day of play and fun</p>
      <p>7-12pm: Open play time: romping, sniffing and lounging</p>
      <p>12-2pm: A well-deserved nap</p>
      <p>2-7pm: Back out for more play before being picked up by Mom or Dad</p>
      <p>Dogs left home alone during the day may experience separation anxiety or display undesirable behavioral issues such as chewing and excessive barking. These can occur when a dog lacks sufficient exercise and socialization. Dog daycare is your answer!
        Drop your dog off at Luckys and they'll spend the day socializing with other dogs, interacting with our well-trained staff and burning off energy. At the end of the day, you'll pick-up a happy and delightfully tired pup. Some dogs visit every
        day, others just a couple of times a month. Every dog is unique and we're happy to discuss the best play schedule to suit your dog's needs, as well as your busy schedule, budget and life-style.</p>
    </div>

  </header>

</div>

View on CodePen

what do you mean?? i do have shape-outside applied to .curve (the image im trying to wrap) — aberdeen, Mar 28 '18 at 15:35
i know, i mean i already have that property applied to my CSS for the image and it's still not working — aberdeen, Mar 28 '18 at 15:39

score 6 · Answer 1 · answered Mar 28 '18 at 15:45

Remove the floats from the paragraphs.

.curve {
  width: 300px;
  height: 300px;
  float: left;
  shape-outside: circle();
  border-radius: 50%;
  margin: 15px;
  border-style: solid;
}

.daycare p {
  text-align: left;
  margin: 10px 0 0 7px;
}

<div class="daycare">
  <img src="http://www.placebacon.net/300/300" alt="daycare" class="curve">
  <p>7am: Happy dogs begin to arrive for a full day of play and fun</p>
  <p>7-12pm: Open play time: romping, sniffing and lounging</p>
  <p>12-2pm: A well-deserved nap</p>
  <p>2-7pm: Back out for more play before being picked up by Mom or Dad</p>
  <p>Dogs left home alone during the day may experience separation anxiety or display undesirable behavioral issues such as chewing and excessive barking. These can occur when a dog lacks sufficient exercise and socialization. Dog daycare is your answer!
    Drop your dog off at Luckys and they'll spend the day socializing with other dogs, interacting with our well-trained staff and burning off energy. At the end of the day, you'll pick-up a happy and delightfully tired pup. Some dogs visit every day,
    others just a couple of times a month. Every dog is unique and we're happy to discuss the best play schedule to suit your dog's needs, as well as your busy schedule, budget and life-style.</p>
</div>

well thats exactly what im looking for, but removing float property from p element has no effect on my end. Something else in my code interfering with it maybe? — aberdeen, Mar 28 '18 at 15:51

score 0 · Answer 2 · answered Mar 28 '18 at 17:29

0

Ok so I feel kinda dumb, but I realized I accidentally had the /header tag after daycare section, that should have ended after nav. When I moved it back up it fixed the issue. So some CSS rule for the header or something was interfering with it. thanks for help everyone

answered Mar 28 '18 at 17:29

aberdeen

59
1
6

ya, my header p css rules were interfering with daycare p css rules – aberdeen Mar 28 '18 at 17:57

score -1 · Answer 3 · answered Mar 28 '18 at 16:10

-1

I believe the image has to be inline with the content you want to wrap around it, not in a block of its own. Placing the image inside a paragraph seems to work for me.

answered Mar 28 '18 at 16:10

bernk

1,155
2
12
22

Cant get text to wrap around circular image

3 Answers3