wrapping text around image in html

Computer Programming Forums : Questions and Answers, Articles, Tutorials, and Code Snippets

Switch to full style
HTML code examples
Post a reply
DrRakha
  • DrRakha
  • Posts: 2715
  • Joined: Tue Mar 27, 2007 10:55 pm
  • Location: Earth
  • Website

wrapping text around image in html

Thu Feb 16, 2012 4:26 pm

Following example shows you the benefits of using the float attribute to wrap the text content around an image.
Code:
<html>
<head>
  
  <title>Wrapping text around an image</title>
  <style type="text/css">
  img.floatImage { 
    float: left;
    margin-right: 2px;
    margin-bottom: 1px;
  }
  
  img.nofloatImage { 
 
    margin-right: 2px;
    margin-bottom: 1px;
  }
  </style>
</head>

<body>
    <center>
     <b> This example shows you the difference when using the float attribute with your image. 
      Using this attribute allow you to wrap the text around the image.
      </b>
    </center>
  <p>
  <img src="site_logo.gif"   class="floatImage" alt="image" /> 
  
    your content here. your content here. your content here. your content here.
    your content here. your content here. your content here. your content here.
    your content here. your content here. your content here. your content here.
    your content here. your content here. your content here. your content here.
    your content here. your content here. your content here. your content here.
    your content here. your content here. your content here. your content here.
    your content here. your content here. your content here. your content here.
    your content here. your content here. your content here. your content here.
    your content here. your content here. your content here. your content here.
    your content here. your content here. your content here. your content here.
    your content here. your content here. your content here. your content here.
     
  
   
  </p>

  <p>
  <img src="site_logo.gif"   class="nofloatImage" alt="image" /> 
  
    your content here. your content here. your content here. your content here.
    your content here. your content here. your content here. your content here.
    your content here. your content here. your content here. your content here.
    your content here. your content here. your content here. your content here.
    your content here. your content here. your content here. your content here.
    your content here. your content here. your content here. your content here.
    your content here. your content here. your content here. your content here.
    your content here. your content here. your content here. your content here.
    your content here. your content here. your content here. your content here.
    your content here. your content here. your content here. your content here.
    your content here. your content here. your content here. your content here.
     
  
   
  </p>
  
  
</body>
</html>

 




Post a reply
  Related Posts  to : wrapping text around image in html
 how to change the alignment text in html     -  
 convert image (vehicle registration) to text in java?     -  
 Able to Copy Text from Uneditable Text Boxes(JTextfields)     -  
 Image-Viewer-Image Processing-Filters-Noise-enhancements     -  
 Java- Copy text area into disabled text area     -  
 Move image in front of a background image     -  
 different between cfa image and gray level image     -  
 PNG image to the image you generated     -  
 Flaming Text     -  
 Aligning the text within the div tag     -  

Topic Tags

HTML Image
Switch to full style

Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com


Powered by phpBB © phpBB Group.


Codemiles.com