Welcome Login

Wrapping text around an image


Css

Floating is often used to push an image to one side, while having the text of a paragraph wrap around it.

This type of usage is often referred to as text wrapping.

Eg:

<html>

<head>
</head>

<body>
   <img src="./happyface.png"></img>
   <p>gibberish gibberish gibberish gibberish gibberish gibberish gibberish gibberish gibberish gibberish gibberish gibberish gibberish gibberish</p>
</body>

</html>

 

Outputs:

css-textwrap1

 

To wrap text aournd image, use float:


<body> <img style="float:left;" src="./happyface.png"></img> <p>gibberish gibberish gibberish gibberish gibberish gibberish gibberish gibberish gibberish gibberish gibberish gibberish gibberish gibberish</p> </body>

 

Outputs:

css-textwrap2

 

Note: Use css clear property to clear any floating elements and return flow to default.

 

 

For more information, see here.


Created on: Friday, March 4, 2011 by Andrew Sin