CSS – Understanding the float [Webbing Tips]

In this post, you will understand the ‘float’ property with CSS, what it does and when to use it in your Web Application.  This post is part of the Webbing Tips series, where you learn a Web Development related tip or concept with just 10 minutes of your time.

CSS float

‘float’ CSS Property on an element on a Web Page, is used to position that element in relation to the other elements that are preceding or following the specified element.  It works only on relatively positioned elements (which mean the ‘float’ Property is ignored on elements with ‘position:absolute’)

float Property can take 4 values:

  • left – Element floats to the left and the elements following this will be positioned next to this element on the right side
  • right – Element floats to the right and the elements preceding this will be positioned next to this element on the left side
  • none – No float.  Element stays where it is, depending on the sequence in which it appears
  • inherit – Element inherits the floating behavior from its Parent Element

Examples

Here, I have 2 div Boxes on my Web page.  When I apply the property of ‘float:left’ to both of them, they float to the left of the Browser Canvas.  Any elements following them, will be on the same line as long as the width of the Browser Canvas permits.

CSS float:left

And, on applying the property ‘float:right’ to both of them, they float to the right of the Browser Canvas.  Note in this case, the First Box floats first and then the Next Box.

CSS float:right

Finally, on applying ‘float:none’, which is the same as no defining the float property, they appear one after another.

CSS float:none

When to Use?

When you have relatively positioned elements on your Web Page and you want to Position them to the Left or Right of the Browser Canvas. Note, this positioning works well irrespective of the Browser Canvas Dimensions, as the elements are relatively positioned.

If you link this entry, please share it
We Recommend
Hostgator is our first choice when it comes to Reliable 24x7 Hosting, Affordable Cost, Awesome Support and Great Quality. Click here to explore and get your Own Hosting now!>

Speak Your Mind

*