CSS3 supplies a couple techniques for layout. The preferred technique for most applications is a floating layout. The basic idea of this technique is to leave the HTML layout as simple as possible, but to provide style hints that tell the various elements how to interact with each other on the screen.
In a floating layout, you don't legislate exactly where everything will go. Instead, you provide hints and let the browser manage things for you. This ensures flexibility because the browser will try to follow your intentions, no matter what size or shape the browser window becomes. If the user resizes the browser, the page will flex to fit to the new size and shape, if possible.
Floating layouts typically involve less code than other kinds of layouts because only a few elements need specialized CSS. In most of the other layout techniques, you need to provide CSS for every single element to make things work as you expect.
How to use float with images
The most common place to use the float attribute is with images.
It's more likely that you want the image to take up the entire left part of the paragraph. The text should flow around the paragraph,
When you add a float:left attribute to the img element, the image tends to move to the left, pushing other content to the right. Now, the text flows around the image. The image is actually removed from the normal flow of the page layout, so the paragraph takes up all the space. Inside the paragraph, the text avoids overwriting the image.
How to add the float property
The code for adding the float property is pretty simple:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>imgFloatLeft.html</title>
<style type = "text/css">
img {
float: left;
}
</style>
</head>
<body>
<p>
<img src = "ball.gif"
alt = "ball" />
The image now has its float attribute set to left. That means
that the text will flow around the image as it normally does
in a magazine.
The image now has its float attribute set to left. That means
that the text will flow around the image as it normally does
in a magazine.
The image now has its float attribute set to left. That means
that the text will flow around the image as it normally does
in a magazine.
The image now has its float attribute set to left. That means
that the text will flow around the image as it normally does
in a magazine.
The image now has its float attribute set to left. That means
that the text will flow around the image as it normally does
in a magazine.
</p>
</body>
</html>
The only new element in the code is the CSS float attribute. The object has a float:left attribute. It isn't necessary to change any other attributes of the paragraph because the paragraph text knows to float around the image.
Of course, you don't have to simply float to the left.
