http://www.homeandlearn.co.uk/WD/wds4p6.html
Let's see how to get the following
style:
As you can see, the image is on the right and the text flows around it. There
is also space between the image and the text.
The first thing to do is to set up a STYLE in the HEAD section of the HTML.
Add the highlighted code to your own HTML:
The style we've set up is called TextWrap. In between the two curly brackets
we have this:
float: right;
margin: 10px;
The CSS property we need in order to move the image is called
float.
The float property can take three values: left, right and none. To get some
space between the image and the text we can use the
margin property.
We've set it to 10 pixels. This will give you space around the entire image.
If you only want space on specific sides of the image you can use these:
margin-left
margin-right
margin-top
margin-bottom
So we could have done this:
margin-left: 10px;
margin-bottom: 10px;
That would get us a 10 pixels margin on the left of the image and 10 pixels
at the bottom.
To apply the style to the image, you need to add the CLASS attribute to the
IMG tag:
<IMG SRC="york_images/york_minster_2.gif"
CLASS="TextWrap">
The CLASS attribute doesn't have to go at the end. If you prefer, you can put
it after the IMG tag:
<IMG CLASS="TextWrap" SRC="york_images/york_minster_2.gif"
>
Just take note of where all the spaces are in the code above.
Amend your own IMG tag and add CLASS="TextWrap" to your own IMG code.
Before you try it out, add a paragraph of text below the image:
<IMG class="TextWrap" SRC="york_images/york_minster_2.gif">
<P>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris
eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci
purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor.
Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus.
Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur
sit amet erat quis risus feugiat viverra.
</P>
You can, of course, use your own text, and not just the Lorem ipsum text. Make
sure your IMG code is above the first P tag, however.
Save your work and view the results in your browser.
There is, however, a problem with the above code. Suppose we want a second
paragraph of text with another image floated on the left. We want to do this:
Here, the second image is nicely aligned below and to the left of the first
image. The text is in the right place, too.
To achieve this, you might think of adding a second style and then applying
it to the second image. Like this:
In the second style, we've used
float: left and added a 10 pixel margin
as before. In the second IMG tag, we've used the new TextWrapLeft class.
However, saving the work and refreshing gives you this in the browser:
In this version, the second image starts two thirds of the way down the first
image. The text doesn't flow as we want it, as well.
The way to correct this is to use a CSS property called
clear. This
clears any floating elements and gets you back to the normal, default flow for
browsers. The clear property can take four values: left, right, both, none.
Because our first image was floated to the right, we want to clear to the right.
We can add this to the second style:
If our first image had been on the left, we would have used
clear: left.
