How to Float a Boat
CSS Float Image Left
SPAN and IMG
We use two methods for floating our boat, one method uses the span and another uses the img tag only.
If you are looking for the preferred method use the last one listed here (#4. SPAN with Padding). It works well and is probably the most popular method. It depends on how you want the image to display and where you want the text to wrap around the image.
We are using the SPAN tag with a padding of 15 pixels around the image here.
We want the text to appear above, around, and below the image so we
put the SPAN tag in the middle of our text. The placement of the SPAN
that contains the image is up to you. Try floating the image first
and then type in your text.
Copy and paste (or type) this in your Blog or Web page.
It will look like this.
We are using the SPAN tag with a padding of 15 pixels around the image here.
We want the text to appear above, around, and below the image so we
put the SPAN tag in the middle of our text. The placement of the SPAN
that contains the image is up to you. Try floating the image first
and then type in your text.
1. Span Without Padding
We don't like the text aligned next to the image.
But, we can float our boat image to the left of our text using
the SPAN tag. We have to type
in enough text so that we don't run into the next tag
and confuse the the browser.
Copy and paste (or type) this in your Blog or Web page.
It will look like this.
We don't like the text aligned next to the image.
But, we can float our boat image to the left of our text using
the span tag. We have to type
in enough text so that we don't run into the next tag
and confuse the the browser. Or, make sure that we close the end with a break clear.
2. IMG without HSPACE
IMG
We don't like the text aligned next to the image.
But, we can float our boat image to the left of our text by adding
the ALIGN="LEFT" in the IMG tag.
We are typing just enough here to get the text to wrap so that you can see the alignment in action.
Copy and paste (or type) this in your Blog or Web page.
3. IMG With HSPACE
Add HSPACE to IMG
We like padding next to the image.
We are using HSPACE="15" here. Most sites prefer 10. We increase the amount of padding depending upon the size of the image or what we think looks better. There is no rule.
Copy and paste (or type) this in your Blog or Web page.
It will look like this.
We like padding next to the image.
We are using the hspace here. Most postings use
a padding of about 10 pixels. We increase the
amount of padding depending upon the size of
the image or what we think looks better.
There is no rule.
4. SPAN With Padding
Add PADDING to SPAN
We like padding next to the image.
We are using a 15px padding here. Most images look good with padding:10px.
We increase the amount of padding depending upon the size of the
image or what we think looks better. There is no rule.
Copy and paste (or type) this in your Blog or Web page.
It will look like this.
We like padding next to the image.
We are using a 15px padding here.
Most images look good with padding:10px.
We increase the amount of padding
depending upon the size of the
image or what we think looks better.
There is no rule.
CSS Style Sheet
Float Left in Style Sheet
If you want to float everyday you can add this to your style sheet.
.floatleft {
float:left;
padding:15px;
}
Then type this in your Blog or Web page.
It will look like this.
And then put your text here. You can type as much as you want, just type enough to clear the float.
You can add more to the float class definition; change the padding, or even add an image (the same image to display each time) and all kinds of spiffy stuff. It just depends on how you want it to display.
If you don't type in enough text to flow to the bottom of the picture you will want to clear the float. You can do that with a
clear:left
clear:right
clear:both
I type it in after the paragraph ends (rarely needed).
<div style="clear:both;"></div>