How do I make text wrap around a div or span element?

Question

I want to be able to specify the width and height of an element and have the text wrap around whatever size it is. For instance if I want to create a box that's 100 X 100 pixels the text will adapt and wrap around it.

http://jsfiddle.net/qmhoa14j/1/

    <span id="block">Why isn't this 100 px?</span> 
    <p>
    Once peasant footwear, espadrilles have grown in popularity, especially in the Catalan region and the Basque countries, where many men and women wear them during the spring and summer months. Designer espadrilles are now widely available. They are usually manufactured in Spain and South Asia. Modern espadrilles are predominantly for women, though some men's shoes are made in this style.
    The soles of espadrilles may be flat, platform, or wedge shaped made of natural fiber. Uppers may be made from nearly any substance and may have open or closed toes, open or closed backs, and can be slip-on or tied to the ankle with laces. Thousands of varieties of espadrilles can be found, from inexpensive bargain brands to high priced designer brands.
    Espadrilles became fashionable in the USA in the 1940s. Lauren Bacall's character in the 1948 movieKey Largo wore ankle-laced espadrilles.
    </p>
    <p>
    Wedge shaped espadrilles were first popularized by French fashion designer Yves Saint Laurent. At a trade fair in Paris in 1970, he came into contact with the Spanish espadrille manufacturer Castañer. Yves Saint Laurent had been looking in vain for months for someone to make him a wedge espadrille. Castañer managed to interpret Yves Saint Laurent's vision and the wedge espadrilles were an instant hit, influencing fashion even today.
    The espadrille style was revived in the USA in the 1980s, due to the success of Miami Vice—the shoe was worn by the character Sonny Crockett (played by Don Johnson). In 2013 at luxury shoe stores in New York City, a pair of espadrilles could cost nearly $500.[3]
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue velit, laoreet in magna non, maximus malesuada purus. In hac habitasse platea dictumst. Sed pharetra purus commodo lorem placerat egestas. Duis nec dolor placerat, maximus enim a, vulputate ante. Nullam porta mauris quis purus cursus sollicitudin. Pellentesque et sem ac lectus semper luctus. Praesent malesuada augue nibh, nec gravida risus tincidunt vulputate. Donec pulvinar nisi eu mauris aliquam pulvinar. Nunc quis ligula quis massa gravida posuere in ac nisl. Nulla non fermentum lorem. Aliquam sed est tincidunt, volutpat metus vitae, tristique augue. Etiam venenatis varius augue, at suscipit mi accumsan sed. Vivamus porta est non nulla vulputate, sit amet rutrum dolor convallis.
    Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis dolor a nunc facilisis pulvinar. Nulla velit eros, vulputate commodo ultricies sit amet, rhoncus ac lectus. Aliquam erat volutpat. Nullam ultrices vehicula nulla, nec consequat nunc euismod sit amet. Maecenas dictum magna vel augue imperdiet vestibulum. Cras vitae urna posuere, bibendum risus non, finibus ligula. Duis ac lacinia metus.
    Morbi finibus condimentum fringilla. Pellentesque porttitor magna a erat pharetra tempus. Donec sed auctor nulla. Morbi congue rutrum tempor. Vivamus porta odio purus, at pulvinar risus tincidunt vel. Integer quam turpis, mattis sit amet fringilla eget, gravida eget tellus. Maecenas nec dignissim est. Nam turpis nulla, malesuada vel felis vitae, egestas viverra augue. Sed mi nisl, vehicula et fermentum at, bibendum id ex. Praesent mollis ullamcorper tortor ac accumsan. Etiam consectetur dignissim tellus in egestas. Donec eu ipsum hendrerit, cursus augue ut, lacinia sem. Quisque at dui tellus. Maecenas eget volutpat tellus.
    </p>

CSS:

#block{
    background: red;
    width 100px;
    height: 100px; 
    display:inline;
}

p {
    display: inline;
    margin: 10px;
    text-align: justify;
    //float: left;
}

Answer 1

You want to use display: inline-block instead of inline:

#block {
    background: red;
    height: 100px;
    display:inline-block;
}
p {
    display: inline;
    margin: 10px;
    text-align: justify;
    //float: left;
}

	<span id="block">Why isn't this 100 px?</span> 
<p>Once peasant footwear, espadrilles have grown in popularity, especially in the Catalan region and the Basque countries, where many men and women wear them during the spring and summer months. Designer espadrilles are now widely available. They are usually manufactured in Spain and South Asia. Modern espadrilles are predominantly for women, though some men's shoes are made in this style. The soles of espadrilles may be flat, platform, or wedge shaped made of natural fiber. Uppers may be made from nearly any substance and may have open or closed toes, open or closed backs, and can be slip-on or tied to the ankle with laces. Thousands of varieties of espadrilles can be found, from inexpensive bargain brands to high priced designer brands. Espadrilles became fashionable in the USA in the 1940s. Lauren Bacall's character in the 1948 movieKey Largo wore ankle-laced espadrilles.</p>
<p>Wedge shaped espadrilles were first popularized by French fashion designer Yves Saint Laurent. At a trade fair in Paris in 1970, he came into contact with the Spanish espadrille manufacturer Castañer. Yves Saint Laurent had been looking in vain for months for someone to make him a wedge espadrille. Castañer managed to interpret Yves Saint Laurent's vision and the wedge espadrilles were an instant hit, influencing fashion even today. The espadrille style was revived in the USA in the 1980s, due to the success of Miami Vice—the shoe was worn by the character Sonny Crockett (played by Don Johnson). In 2013 at luxury shoe stores in New York City, a pair of espadrilles could cost nearly $500.[3]</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue velit, laoreet in magna non, maximus malesuada purus. In hac habitasse platea dictumst. Sed pharetra purus commodo lorem placerat egestas. Duis nec dolor placerat, maximus enim a, vulputate ante. Nullam porta mauris quis purus cursus sollicitudin. Pellentesque et sem ac lectus semper luctus. Praesent malesuada augue nibh, nec gravida risus tincidunt vulputate. Donec pulvinar nisi eu mauris aliquam pulvinar. Nunc quis ligula quis massa gravida posuere in ac nisl. Nulla non fermentum lorem. Aliquam sed est tincidunt, volutpat metus vitae, tristique augue. Etiam venenatis varius augue, at suscipit mi accumsan sed. Vivamus porta est non nulla vulputate, sit amet rutrum dolor convallis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis dolor a nunc facilisis pulvinar. Nulla velit eros, vulputate commodo ultricies sit amet, rhoncus ac lectus. Aliquam erat volutpat. Nullam ultrices vehicula nulla, nec consequat nunc euismod sit amet. Maecenas dictum magna vel augue imperdiet vestibulum. Cras vitae urna posuere, bibendum risus non, finibus ligula. Duis ac lacinia metus. Morbi finibus condimentum fringilla. Pellentesque porttitor magna a erat pharetra tempus. Donec sed auctor nulla. Morbi congue rutrum tempor. Vivamus porta odio purus, at pulvinar risus tincidunt vel. Integer quam turpis, mattis sit amet fringilla eget, gravida eget tellus. Maecenas nec dignissim est. Nam turpis nulla, malesuada vel felis vitae, egestas viverra augue. Sed mi nisl, vehicula et fermentum at, bibendum id ex. Praesent mollis ullamcorper tortor ac accumsan. Etiam consectetur dignissim tellus in egestas. Donec eu ipsum hendrerit, cursus augue ut, lacinia sem. Quisque at dui tellus. Maecenas eget volutpat tellus.</p>

Answer 2

First solution:

You can just simply wrap it with div

The reason is because span is an inline element - not a block element. If you want the element to conform to the right height and width, have the right float values, and respond to the text around it, it needs to be a block element - which divs are.

#block {
  background: red;
  width 100px;
  height: 100px;
}
p {
  display: inline;
  margin: 10px;
  text-align: justify;
  //float: left;

}

<div id="block">
  <span>Why isn't this 100 px?</span>

</div>
<p>Once peasant footwear, espadrilles have grown in popularity, especially in the Catalan region and the Basque countries, where many men and women wear them during the spring and summer months. Designer espadrilles are now widely available. They are usually
  manufactured in Spain and South Asia. Modern espadrilles are predominantly for women, though some men's shoes are made in this style. The soles of espadrilles may be flat, platform, or wedge shaped made of natural fiber. Uppers may be made from nearly
  any substance and may have open or closed toes, open or closed backs, and can be slip-on or tied to the ankle with laces. Thousands of varieties of espadrilles can be found, from inexpensive bargain brands to high priced designer brands. Espadrilles
  became fashionable in the USA in the 1940s. Lauren Bacall's character in the 1948 movieKey Largo wore ankle-laced espadrilles.</p>
<p>Wedge shaped espadrilles were first popularized by French fashion designer Yves Saint Laurent. At a trade fair in Paris in 1970, he came into contact with the Spanish espadrille manufacturer Castañer. Yves Saint Laurent had been looking in vain for months
  for someone to make him a wedge espadrille. Castañer managed to interpret Yves Saint Laurent's vision and the wedge espadrilles were an instant hit, influencing fashion even today. The espadrille style was revived in the USA in the 1980s, due to the
  success of Miami Vice—the shoe was worn by the character Sonny Crockett (played by Don Johnson). In 2013 at luxury shoe stores in New York City, a pair of espadrilles could cost nearly $500.[3]</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue velit, laoreet in magna non, maximus malesuada purus. In hac habitasse platea dictumst. Sed pharetra purus commodo lorem placerat egestas. Duis nec dolor placerat, maximus enim a, vulputate
  ante. Nullam porta mauris quis purus cursus sollicitudin. Pellentesque et sem ac lectus semper luctus. Praesent malesuada augue nibh, nec gravida risus tincidunt vulputate. Donec pulvinar nisi eu mauris aliquam pulvinar. Nunc quis ligula quis massa
  gravida posuere in ac nisl. Nulla non fermentum lorem. Aliquam sed est tincidunt, volutpat metus vitae, tristique augue. Etiam venenatis varius augue, at suscipit mi accumsan sed. Vivamus porta est non nulla vulputate, sit amet rutrum dolor convallis.
  Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis dolor a nunc facilisis pulvinar. Nulla velit eros, vulputate commodo ultricies sit amet, rhoncus ac lectus. Aliquam erat volutpat. Nullam ultrices vehicula nulla, nec consequat
  nunc euismod sit amet. Maecenas dictum magna vel augue imperdiet vestibulum. Cras vitae urna posuere, bibendum risus non, finibus ligula. Duis ac lacinia metus. Morbi finibus condimentum fringilla. Pellentesque porttitor magna a erat pharetra tempus.
  Donec sed auctor nulla. Morbi congue rutrum tempor. Vivamus porta odio purus, at pulvinar risus tincidunt vel. Integer quam turpis, mattis sit amet fringilla eget, gravida eget tellus. Maecenas nec dignissim est. Nam turpis nulla, malesuada vel felis
  vitae, egestas viverra augue. Sed mi nisl, vehicula et fermentum at, bibendum id ex. Praesent mollis ullamcorper tortor ac accumsan. Etiam consectetur dignissim tellus in egestas. Donec eu ipsum hendrerit, cursus augue ut, lacinia sem. Quisque at dui
  tellus. Maecenas eget volutpat tellus.</p>

Second solution:

Another solution is to add float:left to span element

#block {
  background: red;
  width 100px;
  height: 100px;
  float: left;
}
p {
  display: inline;
  margin: 10px;
  text-align: justify;
}

<span id="block">Why isn't this 100 px?</span>

<p>Once peasant footwear, espadrilles have grown in popularity, especially in the Catalan region and the Basque countries, where many men and women wear them during the spring and summer months. Designer espadrilles are now widely available. They are usually
  manufactured in Spain and South Asia. Modern espadrilles are predominantly for women, though some men's shoes are made in this style. The soles of espadrilles may be flat, platform, or wedge shaped made of natural fiber. Uppers may be made from nearly
  any substance and may have open or closed toes, open or closed backs, and can be slip-on or tied to the ankle with laces. Thousands of varieties of espadrilles can be found, from inexpensive bargain brands to high priced designer brands. Espadrilles
  became fashionable in the USA in the 1940s. Lauren Bacall's character in the 1948 movieKey Largo wore ankle-laced espadrilles.</p>
<p>Wedge shaped espadrilles were first popularized by French fashion designer Yves Saint Laurent. At a trade fair in Paris in 1970, he came into contact with the Spanish espadrille manufacturer Castañer. Yves Saint Laurent had been looking in vain for months
  for someone to make him a wedge espadrille. Castañer managed to interpret Yves Saint Laurent's vision and the wedge espadrilles were an instant hit, influencing fashion even today. The espadrille style was revived in the USA in the 1980s, due to the
  success of Miami Vice—the shoe was worn by the character Sonny Crockett (played by Don Johnson). In 2013 at luxury shoe stores in New York City, a pair of espadrilles could cost nearly $500.[3]</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue velit, laoreet in magna non, maximus malesuada purus. In hac habitasse platea dictumst. Sed pharetra purus commodo lorem placerat egestas. Duis nec dolor placerat, maximus enim a, vulputate
  ante. Nullam porta mauris quis purus cursus sollicitudin. Pellentesque et sem ac lectus semper luctus. Praesent malesuada augue nibh, nec gravida risus tincidunt vulputate. Donec pulvinar nisi eu mauris aliquam pulvinar. Nunc quis ligula quis massa
  gravida posuere in ac nisl. Nulla non fermentum lorem. Aliquam sed est tincidunt, volutpat metus vitae, tristique augue. Etiam venenatis varius augue, at suscipit mi accumsan sed. Vivamus porta est non nulla vulputate, sit amet rutrum dolor convallis.
  Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quis dolor a nunc facilisis pulvinar. Nulla velit eros, vulputate commodo ultricies sit amet, rhoncus ac lectus. Aliquam erat volutpat. Nullam ultrices vehicula nulla, nec consequat
  nunc euismod sit amet. Maecenas dictum magna vel augue imperdiet vestibulum. Cras vitae urna posuere, bibendum risus non, finibus ligula. Duis ac lacinia metus. Morbi finibus condimentum fringilla. Pellentesque porttitor magna a erat pharetra tempus.
  Donec sed auctor nulla. Morbi congue rutrum tempor. Vivamus porta odio purus, at pulvinar risus tincidunt vel. Integer quam turpis, mattis sit amet fringilla eget, gravida eget tellus. Maecenas nec dignissim est. Nam turpis nulla, malesuada vel felis
  vitae, egestas viverra augue. Sed mi nisl, vehicula et fermentum at, bibendum id ex. Praesent mollis ullamcorper tortor ac accumsan. Etiam consectetur dignissim tellus in egestas. Donec eu ipsum hendrerit, cursus augue ut, lacinia sem. Quisque at dui
  tellus. Maecenas eget volutpat tellus.</p>