Flowing text around an image : Image « CSS Controls « HTML / CSS






  1. HTML / CSS
  2. CSS Controls
  3. Image

Flowing text around an image

  
<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
body { padding: 2em; } 
.image-left { float: left; padding-right: 1em; } 
</style> 
</head> 
<body> 
<div class="image-left"> 
<img src="http://java2s.com/style/logo.png" alt="alt message"> 
</div> 
<p> 
This is a test.
This is a test.
This is a test.
This is a test.
This is a test.
This is a test.
This is a test.
This is a test.
This is a test.
This is a test.
</p> 
<p> 
This is a test.
This is a test.
This is a test.
This is a test.
This is a test.
This is a test.
This is a test.
This is a test.
This is a test.

</p> 
</body> 
</html>








Related examples in the same category

1.Image wrap text
2.Image floating
3.Image as list icon
4.Using huge image as background
5.Image and text
6.Huge topic image
7.Image gallary inside the sidebar
8.Image on the left
9.Image centered design
10.Fill left and right side of the content with image pattern
11.Single column with Top image section
12.Anchor hover with image background
13.List with image background
14.inline images
15.Adding shading and mask to a picture
16.Gallery Grid Demo