CSS Layout How to - Wrap text around image that is behind text








Question

We would like to know how to wrap text around image that is behind text.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#text {<!-- w w  w . j a v a  2s . c o  m-->
  width: 400px;
}

#image {
  background: red;
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 10px 0 0;
}
</style>
</head>
<body>
  <div id="text">
    <div id="image"></div>
    <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
      Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem
      ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
      Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem
      ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
      Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
  </div>
</body>
</html>

The code above is rendered as follows: