CSS Wrap Around An Image

Here is how to wrap text around an image with CSS:

In HTML you would like to do this: <IMG SRC="rc123_images/rc_finger.jpg" ALIGN="Top">

 In CSS of course it get s complicated - here it is:

CSS in Head section

In the head section fo the page set this up using your own image code etc.


<Title> Roger's Finger</Title>

              .Textwrap  {
                                 float: right;
                                 margin: 5px;



 Somewhere between <STYLE> and </STYLE> you have the CSS code for the HEAD section:

 There are three possible values for the "Float" property in CSS. They are Left, Right and None.

You can also add

margin-top: 5px;
margin-left: 5px;
margin-bottom: 5px; 

With any reasonable number for distance.


At the image area add this code with your own image code:

<img SRC="rc123_images/rc_finger.jpg" CLASS="TextWrap">

 The text has to go under the image code with <p></p> tags around it.

Mr L and Mr C. were talking about some wonderful new music just a few hours before MR C used a gun and shot Mr L. in front of his home.

Mr L's wife was not pleased and Mr. C went to be imprisoned because of his abherrant behaviour.

Fans were disturbed and gathered to grieve in the nearby park and all over the world.

Roger Chartier was displeased to a great extent by this horrible massacre of the most influential person in his world.

 For an image on the right and below that an image on the left with text wrapped around it you can do this in the Head section.

               .TextWrap {
                            float: right;
                            margin: 5px;

               .TextWrapLeft {
                          float: left;
                          margin: 5px

 and this on the page code:

<img SRC="rc123_images/rc_finger.jpg" CLASS="TextWrapLeft">  

Roger Chartier       Disclaimer - Privacy Policy The Author - Roger Chartier