Web Pages Designed With Your Wallet In Mind!
Examples of Text Wrap Around Images
The images are contained within the div tag. This image has been floated to the left, and one below to the right because both types of image floating in this example were used. Notice how the text wraps around the images quite nicely.
This second paragraph has an image that is floated to the right. It should be noted that a margin should be added to images so that the text does not get too close to the image. There should always be a few pixels between words and borders, images, and other content.
Code used for above text wrap including styling:
<head>
<style type="text/css">
img.floatLeft {
float: left;
margin-right: 4px;
}
img.floatRight {
float: right;
margin-left: 4px;
}
</style>
</head>
<body>
<img class="floatLeft" src="../imgs/flag_support.jpg" alt="FLAG"
title="FLAG">
<p>The images are contained within the div tag. The image has
floated to the left, and also to the right because we have used
both types of image floating in this example. Notice how the text
wraps around the images quite nicely.</p>
<img class="floatRight" src="../imgs/flag_support.jpg" alt="FLAG"
title="FLAG">
<p>This second paragraph has an image that is floated to the right.
It should be noted that a margin should be added to images so that
the text does not get too close to the image. There should always
be a few pixels between words and borders, images, and other
content.</p>
</body>
Code used for below text wrap including styling:
<head>
<style type="text/css">
.imageLeft {
float:left;
margin-right: 2%;
}
.imageRight {
float:right;
margin-left: 2%;
}
</style>
</head>
<body>
<img class="imageLeft flag" src="imgs/flag_support.jpg" alt="FLAG"
title="FLAG">
<p>The images are contained within the div tag. This text will wrap
around the image and its description, if it's long enough. It is
also contained in a div with a 25% width. Text styling also applied.
This div is set to float left with a 2% margin.</p><p>Second
paragraph can be added here...</p>
<img class="imageRight flag" src="imgs/flag_support.jpg" alt="FLAG"
title="FLAG">
<p>This text will wrap around the image and its description, if
it's long enough.It is also contained in a div with a 25% width.
Text styling also applied. This div is set to float right with a 2%
margin.</p>
<p>Second paragraph can be added here...</p>
</body>
Image Title
The images are contained within the div tag. This text will wrap around the image and its description, if it's long enough. It is also contained in a div with a 25% width. Text styling also applied. This div is set to float left with a 2% margin.
Second paragraph can be added here...
Image Title
This text will wrap around the image and its description, if it's long enough.It is also contained in a div with a 25% width. Text styling also applied. This div is set to float right with a 2% margin.
Second paragraph can be added here...
