No-wrap floats

Very easy solution to stop content from wrapping under a floated element.

by ian_smithz

HTML

<a href="https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_media_left_right">bootstrap example</a>

<div id="wrap">
  <img class="left" src="http://www.flags.net/images/largeflags/BELG0001.GIF">
  <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit.

    <p>
      Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia
      bibendum
    </p>
    <p>
      nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.</p>

    <img class="left" src="http://www.flags.net/images/largeflags/BELG0001.GIF">
    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus
      sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Etiam porta sem malesuada magna mollis euismod. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum
      nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.</p>

    <img class="right" src="http://www.flags.net/images/largeflags/BELG0001.GIF">
    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id...

CSS

#wrap {
  margin: 3em 8em;
}

.left {
  float: left;
  margin-right: 1.5em;
}

.right {
  float: right;
  margin-left: 1em;
}

p {
  margin-bottom: 2.5em;
  overflow: hidden;
  /* this is what keep the <p> from wrapping */
}

p:last-child {
  overflow: visible;
  /* this is an example of the browser default */
}

img {
  max-width: 100px
}