CODEWITHSUNDEEP
css
Valeria Melinte
Valeria Melinte

Reputation: 137

Text NOT wrapping around floating div

I am a bit confused about why the text does not float around floating div.Here's an example:

#placeholder {
  float: left;
  width: 12.5%;
  height: 113px;
  background: #000;
}
<p>DIRECTIONS<br> Preheat oven to 400°F. Line a muffin tin. Set aside. In a stand mixer fitted with a paddle attachment, cream together butter and sugar until light and fluffy. Meanwhile, using a blender, puree the diced pears, milk, and almond extract until
  smooth.</p>
<div id="placeholder"></div>

Is it because the floating div is the last element? Can I somehow achieve this but preserving the floating div as the last element? Thanks!

Upvotes: 0

Views: 1584

Answers (1)

Carl Binalla
Carl Binalla

Reputation: 5401

You mean like this? I just re-arranged the order of the two elements. Yours does not work because p has already occupied the whole width before the floating element appeared

#placeholder {
  float: left;
  width: 12.5%;
  height: 113px;
  background: #000;
}
<div id="placeholder"></div>
<p>DIRECTIONS<br> Preheat oven to 400°F. Line a muffin tin. Set aside. In a stand mixer fitted with a paddle attachment, cream together butter and sugar until light and fluffy. Meanwhile, using a blender, puree the diced pears, milk, and almond extract until
  smooth.</p>

Or if you really want to preserve the order, add float:right and width:87.5% to the p element. The 87.5% came from subtracting the width of the floating div to the default width of the p element (which is 100%)

p {
  float: right;
  width:87.5%;
}

#placeholder {
  float: left;
  width: 12.5%;
  height: 113px;
  background: #000;
}
<div id="placeholder"></div>
<p>DIRECTIONS<br> Preheat oven to 400°F. Line a muffin tin. Set aside. In a stand mixer fitted with a paddle attachment, cream together butter and sugar until light and fluffy. Meanwhile, using a blender, puree the diced pears, milk, and almond extract until
  smooth.
</p>

Note: It is best to add clear:both to the next element after the floating div to avoid placement complications

Upvotes: 2

Related Questions