One of the most important concepts a Web developer can understand about CSS are floated elements, which serve a valuable function in aligning and positioning elements relative to each other on a Web page.
Cascading Style Sheets (CSS) are rapidly becoming the de facto standard for Web page layout and positioning. They're easy to use, don't require any special software, and work uniformly on most major browsers. Using them correctly, however, requires a sound analysis of the functional purpose of a particular layout, both to ensure that the resulting style sheets are logically and functionally correct and that they are portable across different browsers or viewing devices.
Often, Web developers fail to understand this particular aspect of style sheet usage, leading to code that contains numerous "hacks" to produce the desired end result. To mitigate this problem, it is worth spending some time to understand some of the core CSS drivers and concepts. And one of the most important concepts a developer can understand are so-called floated elements, which serve a valuable function in aligning and positioning elements relative to each other on a Web page.
This article provides a brief introduction to these floated elements, explaining the CSS float and clear directives and providing some examples of how you can use them to better position HTML elements on a Web page.
Floating elements
Essentially, an element that has the float property applied to it moves out of the normal flow of a page, "floating" in space such that content wraps around it. Thus, an element that is floated to the left will have text running down its right side and wrapping around its bottom edge; an element floated to the right will have content running down its left side.
The float property can take one of three possible values: left, which floats the element to the left; right, which floats it to the right; and none, which eliminates floating. Applying the float property to an element automatically turns it into a block-level element. Other non-styled elements ignore the float, acting as though it doesn't exist. If a float bumps into another float generated previously in the document and on the same side, it must remain either to the right of the previously-generated float (if sufficient space exists) or below it (if insufficient space exists).
Example 1: Wrapping text around an image
To better understand floats, let's consider a simple example: using the CSS float property as a replacement for HTML's ALIGN attribute. Consider the following example (Listing A), which floats an image to the left such that descriptive text wraps around it:
Listing A
<html>
<head>
<style type="text/css">
.floater {
float: left;
border: solid 1px black;
padding: 5px;
margin: 5px;
width: 100px;
height: 75px;
}
</style>
</head>
<body>
<img class="floater" src="pix2180.jpg" />
This is what it looks like.
In this case, the image is floated to the left, causing the content that follows to flow down its right side and then wrap around below it. Further, as you resize your browser window, the size of the "box" holding the text will dynamically adjust to the new dimensions.
Do you need help with CSS? 
1
Josh - 16/10/08
Thanks very much. This is one of the trickiest things to get your head around when starting to design with CSS and this is one of the clearest explanations I've come across. Nice one.
» Report offensive content