CSS Tutorial Example
Example
CSS Reference
CSS Introduction
CSS Introduction
CSS Internal
CSS Selector
CSS External
CSS Inline
CSS Class
CSS Background
CSS Font
CSS Text
CSS Padding
CSS Margin
CSS Border
CSS List
CSS Pseudo Class and Mouseover
Advanced Topics
CSS Cursor
CSS Properties
CSS Position
CSS Layers
CSS Float
CSS ID vs Class
CSS Display
CSS Align
CSS Navigation Bar
CSS Attribute Selectors
CSS Image Gallery
CSS Image Opacity
CSS Float
CSS Float
Floating is often used to push an image to one side or another, while having the text of a paragraph wrap around it. This type of usage is often referred to as text wrapping and resembles what you might see in many magazines that have articles which wrap around images of various shapes and sizes.
Float Image
Wrapping text around an image is easy when using the CSS Float attribute. You have a choice to either float the picture to the left or to the right and the rest is done for you. Below is an example of an image that is floated to different sides of a paragraph.
img.floatLeft {
float: left;
margin: 4px;
}
img.floatRight {
float: right;
margin: 4px;
}
Source Code<body>
<img src="filename.gif" class="floatLeft">
<p>The images are contained with...</p>
<img src="filename.gif" class="floatRight">
<p>This second paragraph has an...</p>
</body>
Floating Multiple Images
If you were to simply float three images to the right, they would appear alongside one another. If you wish to have the next image start below the end of the previous image, then use the CSS Clear attribute.
img.floatRightClear {
float: right;
clear: right;
margin: 4px;
}
HTML Source
<body>
<img src="filename.gif" class="floatRightClear">
<img src="filename.gif" class="floatRightClear">
<p>The images are appearing...</p>
<p>If we had specified...</p>
<p>The number of paragraphs...</p>
</body>