CSS Layout How to - Float image and no wrap of content








Question

We would like to know how to float image and no wrap of content.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
div img {<!--from ww  w .  j  a v  a2  s. co m-->
  float: left;
  margin-right: 10px;
}

div p {
  overflow: auto;
}
</style>
</head>
<body>
  <div>
    <img src="http://www.placehold.it/100x100">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
      nec lorem sit amet lectus eleifend auctor ut id mauris. Pellentesque
      auctor lectus vel dui gravida dapibus. Phasellus at laoreet urna.
      Nulla facilisi. Nulla vestibulum sem purus, vulputate convallis eros.
      Sed eget mauris nisi. Fusce lacus mi, gravida quis feugiat eu, porta
      ut est. Curabitur vel elit ut elit vulputate egestas. Vestibulum
      semper urna nec tortor laoreet cursus congue tortor mattis.
      Suspendisse potenti. Sed facilisis leo quam, in elementum dolor.
      Etiam nec nibh dolor. Praesent facilisis elit at urna molestie
      vulputate. Vestibulum non erat risus.</p>
  </div>
</body>
</html>

The code above is rendered as follows: