Floating the image allows the text to flow around it : img float « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. img float

Floating the image allows the text to flow around it

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Wrapping text around an image</title>
  <style type="text/css">
  .figure { 
    float: left;
    margin-right: 1em;
    margin-bottom: .5em;
  }
  </style>
</head>

<body>
  
  <p><img src="images/pizza.jpg" width="180" height="110" class="figure" alt="A close-up of one of our delicious pizzas" /> 
  this is a text. this is a text. this is a text. this is a text. 
  this is a text. this is a text. this is a text. this is a text. 
  this is a text. this is a text. this is a text. this is a text. 
  this is a text. this is a text. this is a text. this is a text. 
  this is a text. this is a text. this is a text. this is a text. 
  </p>

</body>
</html>








Related examples in the same category

1.Image float: left
2.Image float left, (text wrap)
3.Image floating left and right
4.Image floating right
5.Image floating with text
6.Image floating left
7.Image floating right 2
8.Image floating right, left
9.Text floating around image
10.Two image float left and right separately
11.Image floating to left
12.Image Floating right 3
13. floating to right with image
14.Image float and text wraping