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.
float can be set as either left,
right or none.
Property Values
Value Description
left
The element floats to the left
right The
element floats the right
none The element
is not floated, and will be displayed just where it occurs in the text. This is
default
The
property clear
Elements after the floating element
will flow around it. To avoid this, use the clear property.
The clear property specifies which
sides of an element other floating elements are not allowed.
Specifies which sides of an element
where other floating elements are not allowed
The property clear can assume the
values left, right, both or none.
<html>
<head>
<style type="text/css">
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>
<body>
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images
does not have enough room.</p>
<img class="thumbnail" src="Sunset.jpg" width="107" height="90">
<img class="thumbnail" src="Sunset.jpg" width="107" height="80">
<img class="thumbnail" src="Sunset.jpg" width="116" height="90">
<img class="thumbnail" src="Sunset.jpg" width="120" height="90">
<img class="thumbnail" src="Sunset.jpg" width="107" height="90">
<img class="thumbnail" src="Sunset.jpg" width="107" height="80">
<img class="thumbnail" src="Sunset.jpg" width="116" height="90">
<img class="thumbnail" src="Sunset.jpg" width="120" height="90">
</body>
</html>
Example2
<html>
<head>
<style type="text/css">
img
{
float:right;
}
</style>
</head>
<body>
<p>In the paragraph below, we have added an image with style <b>float:right</b>. The result
is that the image will float to the right in the paragraph.</p>
<p>
<img src="Sunset.jpg" width="95" height="84" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
Example3:-
<html>
<head>
<style type="text/css">
img.floatLeft {
float: left;
margin: 4px;
height:50px;width:100px;
}
img.floatRight {
float: right;
margin: 4px; height:50px;width:100px;
}
</style>
</head>
<body>
<img src="sunset.jpg" class="floatLeft">
<p>The images are contained within the paragraph 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. The images are contained within the paragraph 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 src="sunset.jpg" class="floatRight">
<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. 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>
</html>
0 comments:
Post a Comment