Using the CSS float Property to Design Web Page Layouts
October 9, 2012 Leave a comment
The CSS float property is a very important property for layout. It allows you to position your Web page designs exactly as you want them to display – but in order to use it you have to understand how it works.
A CSS float property looks like this:
.right {float: right;}
What Floats?
You can’t float every element on a Web page. To get technical, you can only float block-level elements. These are the elements that take up a block of space on the page, like images (<img/>), paragraphs (<p></p>), divisions (<div></div>), and lists (<ul></ul>). Other elements that affect text, but don’t create a box on the page are called inline elements and can’t be floated. These are elements like span (<span></span>), line breaks (<br/>), strong emphasis (<strong></strong>), or italics (<i></i>).
Where Do They Float?
You can float elements to the right or the left. Any element that follows the floated element will flow around the floated element on the other side.
For example, if I float an image to the left, any text or other elements following it will flow around it to the right. See the example. And if I float an image to the right, any text or other elements following it will flow around it to the left. See the example. An image that is placed in a block of text without any float style applied to it will display as the browser is set to display images. This is usually with the first line of following text displayed at the bottom of the image. See the example.
How Far Will They Float?
An element that has been floated will move as far to the left or right of the container element as it can. This results in several different situations depending upon how your code is written. For these examples, I will be floating a small <div> to the left:
- If the floated element does not have a pre-defined width, it will take up as much horizontal space as required and available, regardless of the float. Note: some browsers attempt to place elements beside floated elements when the width isn’t defined – usually giving the non-floated element only a small amount of space. So you should always define a width on floated elements.
- If the container element is the HTML <body>, the floated div will sit on the left margin of the page.
- If the container element is itself contained by something else, the floated div will sit on the left margin of the container.
- You can nest floated elements, and that can result in the float ending up in a surprising place. For example, this float is a left floated div inside a right floated div.
- Floated elements will sit next to each other if there is room in the container. For example, this container has 3 100px wide divs floated in a 400px wide container.
You can even use floats to create a photo gallery layout. You put each thumbnail (it works best when they are all the same size) in a DIV with the caption and the float the divs in the container. No matter how wide the browser window is, the thumbnails will line up uniformly.
Turning Off the Float
Once you know how to get an element to float, it’s important to know how to turn off the float. You turn off the float with the CSS clear property. You can clear left floats, right floats or both:
clear: left; clear: right; clear: both;
Any element that you set the clear property for will appear below an element that is floated that direction. For example, in this example the first two paragraphs of text are not cleared, but the third is.
Play with the clear value of different elements in your documents to get different layout effects. One of the most interesting floated layouts is a series of images down the right or left column next to paragraphs of text. Even if the text is not long enough to scroll past the image, you can use the clear on all the images to make sure that they appear in the column rather than next to the previous image.
Images floated to the left and to the right.
The HTML (repeat this paragraph):
<p> <img src="maliwithcar_tn.jpg" alt="Mali with car" /> Duis aute irure dolor sed do eiusmod tempor incididunt in reprehenderit in voluptate. Cupidatat non proident, ut labore et dolore magna aliqua. </p>
//The CSS (to float the images to the left):
img.float { float:left;clear:left; margin:5px;}
//And to the right:
img.float { float:right;clear:right; margin:5px;}
Using Floats for Layout
Once you understand how the float property works, you can start using it to lay out your Web pages. These are the steps I take to create a floated Web page:
* Design the layout (on paper or in a graphics tool or in my head).
* Determine where the site divisions are going to be.
* Determine the widths of the various containers and the elements within them.
* Float everything. Even the outermost container element is floated to the left so that I know where it will be in relation to the browser view port.
As long as you know the widths (percentages are fine) of your layout sections, you can use the float property to put them where they belong on the page. And the nice thing is, you don’t have to worry as much about the box model being different for IE or Firefox.
Note: this is a very good article I have copied from http://webdesign.about.com/od/advancedcss/a/aa010107.htm
coding algorithms 
Recent Comments