Floating Elements

You’re doing pretty well, moving on, you should also know how to Float elements in CSS, take for example, you’re writing an article on your web page and you placed an image just below your article, normally in HTML, it just places the image as it’s coded but with CSS, you can align that image properly so it flows with the text of your article.
E.g : Floating an Image inline with some series of text


<html>
<head>
<title>Floating an Element</title>
<style type="text/css">
p {
float: left;
margin: 3px;
padding: 1px;
}
</style>
</head>
<body>
<p><img src="http://www.phcityonweb.com/images/futurama.jpg" width="300" height="170" />
This is how images are floated, as you can see, the images has been floated to the left
 side of the browser. if you look at it again, you can see how the text wraps around the 
image and streams nicely around it. the image doesn't block or interfere with the written 
text. so more text can be added inline with the images and displayed properly. This works 
well if both the text and the floated image are in a single element. look at the code 
at the example and see how you to can float an image inline with some text on your 
web page.
</p>
</body>
</html>

It will look like this on your Browser

Season 6 FuturamaThis is how images are floated, as you can see, the images has been floated to the left side of the browser. if you look at it again, you can see how the text wraps around the image and streams nicely around it. the image doesn’t block or interfere with the written text. so more text can be added inline with the images and displayed properly. This works well if both the text and the floated image are in a single element. look at the code at the example and see how you to can float an image inline with some text on your web page.

Can you see how that work, elements are floated horizontally, that means they can only be floated either left or right. a floated element can move as far to the left or right of the containing element as given in the example above.

Floating Series of Images
With the Float property and value, you can float images and position them in a more proper manner, the float property values are either “Left or Right” and with this you can push an images to the far left or right of a containing element.
E.g. Image Gallery using Float.


<html>
<head>
<title>Floating an Element</title>
<style type="text/css">
p {
float: left;
margin: 2px;
padding: 1px;
}
p.right {
float: right;
margin: 2px;
padding: 1px;
}
</style>
</head>
<body>
<P>
<img src="http://www.phcityonweb.com/images/Futurama1.jpg" 
width="200" height="120" /></p>
<p class="right">
<img src="http://www.phcityonweb.com/images/Futurama2.jpg" 
width="200" height="120" /></p>
See how the images here are both floated left and right of the browser screen, 
this is how it would render on a browser if done. image floating enables you to 
push an image in the right direction in flow with your text. in this example we've 
placed four images for them to be displayed both left and right of the screen. 
see the code above to learn more.
<p>
<img src="http://www.phcityonweb.com/images/Futurama3.jpg" 
width="200" height="120" /></p>
<p class="right">
<img src="http://www.phcityonweb.com/images/Futurama4.jpg" 
width="200" height="120" /></p>
To make this stand out correctly, we've added some random text after the images that
 has been floated. since all images are either floated left or right, you can see that 
the text is in the middle of both sides of images and it wraps itself around it.
</body>
</html>

It will look like this on your Browser

Futurama Pres. Nixon

Futurama The Space Ship

See how the images here are both floated left and right of the browser screen, this is how it would render on a browser if done. image floating enables you to push an image in the right direction in flow with your text. in this example we’ve placed four images for them to be displayed both left and right of the screen. see the code above to learn more.

Futurama John Zoidberg

Futurama The Squad

To make this stand out correctly, we’ve added some random text after the images that has been floated. since all images are either floated left or right, you can see that the text is in the middle of both sides of images and it wraps itself around it.

If you look at the images above, you can see how floating works, the first two images were floated left and right and the other two images were floated left and right as well. but see how nicely arranged it turned out to be. Floating is good when you’re displaying images and text together and want it to render nicely.

Turning Off Float – Using Clear Property
When elements are floated and some series of text are written just below it, those text will be floated according to how those elements have been floated, just as in the example above, both images floated left and right, the text written flowed in context to the direction of both images, to make this float in one direction or not to flow in both direction, the “Clear Property value is employed”.
E.g. clear: left|right|inherit|both|none;
these are the values that are available for the clear property.


<html>
<head>
<title>Floating an Element</title>
<style type="text/css">
p {
float: left;
margin: 2px;
padding: 1px;
}
p.right {
float: right;
margin: 2px;
padding: 1px;
}
p.clear{
clear: both;
margin: 2px;
}
</style>
</head>
<body>
<P>
<img src="http://www.phcityonweb.com/images/Futurama1.jpg" 
width="200" height="120" /></p>
<p class="right">
<img src="http://www.phcityonweb.com/images/Futurama2.jpg" 
width="200" height="120" /></p>
<p class="clear">Check the same example above and compare it with this one,
here the text has been cleared using the clear property CSS rule and see how it is
displayed on it's own after the floated images.</p>
<p>
<img src="http://www.phcityonweb.com/images/Futurama3.jpg" 
width="200" height="120" /></p>
<p class="right">
<img src="http://www.phcityonweb.com/images/Futurama4.jpg" 
width="200" height="120" /></p>
<p class="clear">Using the clear property makes it easier when you do not want 
the text to wrap itself around the floated images, if you want the text to just stand
on it's own then you can employ this method.</p>
</body>
</html>

It will look like this on your Browser

Futurama Pres. Nixon

Futurama The Space Ship

Check the same example above and compare it with this one,
here the text has been cleared using the clear property CSS rule and see how it is displayed on it’s own after the floated images.

Futurama John Zoidberg

Futurama The Squad

Using the clear property makes it easier when you do not want the text to wrap itself around the floated images, if you want the text to just stand on it’s own then you can employ this method.

When working with float try a combination of any of the CSS syntax you’ve learn so far and see what effect you can create.


Back Main: CSS Programming Previous Lesson: Margin & Padding Next Lesson: Positioning of Elements

Leave a Reply

Your email address will not be published. Required fields are marked *

Custom avatar Custom avatar Custom avatar Custom avatar Custom avatar Custom avatar Custom avatar Custom avatar Custom avatar Custom avatar Custom avatar Custom avatar Custom avatar Custom avatar Custom avatar Custom avatar Custom avatar Custom avatar Custom avatar Custom avatar Custom avatar Custom avatar Custom avatar Custom avatar Custom avatar