xhtml and css
Floats and Margins

Float: Right

<!-- ~~~~~~  CODE ~~~~~~ -->

<p>
<img alt="picture"
src="picture.png"
style="float: right;
width: 162px;
height: 251px;">
This is just a sample paragraph. This will illustrate some of the things that a paragraph does it is only an example of text and is just to hold the place of a real paragraph with something to say.
This is just a sample paragraph. This will illustrate some of the things that a paragraph does it is only an example of text and is just to hold the place of a real paragraph with something to say.
</p>

picture This is just a sample paragraph. This will illustrate some of the things that a paragraph does it is only an example of text and is just to hold the place of a real paragraph with something to say.
This is just a sample paragraph. This will illustrate some of the things that a paragraph does it is only an example of text and is just to hold the place of a real paragraph with something to say.




Float: Left

<!-- ~~~~~~  CODE ~~~~~~ -->

<p>
<img alt="picture"
src="picture.png"
style="float: left;
width: 162px;
height: 251px;">
This is just a sample paragraph. This will illustrate some of the things that a paragraph does it is only an example of text and is just to hold the place of a real paragraph with something to say.
This is just a sample paragraph. This will illustrate some of the things that a paragraph does it is only an example of text and is just to hold the place of a real paragraph with something to say.
</p>

picture This is just a sample paragraph. This will illustrate some of the things that a paragraph does it is only an example of text and is just to hold the place of a real paragraph with something to say.
This is just a sample paragraph. This will illustrate some of the things that a paragraph does it is only an example of text and is just to hold the place of a real paragraph with something to say.



Setting the Margins

margin-top: length
margin-right: length
margin-bottom: length
margin-left: length

You can do them all in on declairation

style="margin: 0 0 5 15;"



<!-- ~~~~~~  CODE ~~~~~~ -->

<p>
<img alt="picture" 
src="picture.png"
style="margin: 0pt 0pt 5px 15px;
float: right;
width: 162px;
height: 251px;">
This is just a sample paragraph. This will illustrate some of the things that a paragraph does it is only an example of text and is just to hold the place of a real paragraph with something to say.
<br />
This is just a sample paragraph. This will illustrate some of the things that a paragraph does it is only an example of text and is just to hold the place of a real paragraph with something to say.
</p>

picture This is just a sample paragraph. This will illustrate some of the things that a paragraph does it is only an example of text and is just to hold the place of a real paragraph with something to say.
This is just a sample paragraph. This will illustrate some of the things that a paragraph does it is only an example of text and is just to hold the place of a real paragraph with something to say.



Author - Alan Dunbar
Creative Commons Licence
Valid XHTML 1.0