There are many benefits of Cascading Style Sheets which is a stylesheet language used to describe the presentation of a document written in a markup language like HTML and XML. It is used to enable readers of web pages to define colors, fonts, layout and other aspects of objects present on the web page. This is the reason why this language is quite popular among web designers. On the other hand, it has some disadvantages like lack of support by all browsers, no use of variables, float limitations, multiple properties performing same functions etc. As a beginner, you may face difficulties in positioning the elements in CSS.

The ‘float’ attribute is used to position objects to one side or another using <div> tag, while having the text of a paragraph wrap around it. It is often referred as text wrapping. You can find so many similarities of it in many magazines that contain articles which wrap around images of various shapes and sizes. As a web designer, you may be well-versed with absolute and relative positioning. Some of the examples of these techniques are mentioned below:

position: relative; left; 0px;     position: absolute; right; 0px;
width: 50%; height: 100px;     width: 50%; height: 100px;

There is no problem for basic positioning. But, when your layouts become a little more complex, the actual problem arises. Trying to position a <div> tag within another <div> tag using this method can become a real struggle. Troubles can start when elements positioned as absolute can often position themselves to the total page as opposed to the containing div, which can sometimes become a real nightmare. Some of the other problems include creating multiple <div> tags in line with each other for navigations leads to too many unnecessary left and right positioning values. Here the CSS ‘float’ attribute comes to your rescue.

Using the following code, you can create a page with two boxes, one on the left hand side and the other on the right.

<div style= “float: left; width: 50%; height: 100px;”></div>
<div style= “float: right; width: 50%; height: 100px;”></div>

Another advantage of ‘float’ attribute is unlike other positioning attributes, it make it easy to arrange several elements on the same line. So if you want 5 different boxes positioned next to each other from left to right, the Float performs this task easily. By using the code (float: left; clear: left;), you can start your new element in a new line below a set of navigation boxes. Also by using (float: left; clear: both;), your element will be placed onto the next line underneath any left or right floated elements.

There is no float: center; syntax in CSS. If you want to align an object at the center of the web page, you can simply create a div without the use of the float attribute and use the following margin settings:

<div style= “float: left; width: 600px;”>
<div style= “width: 300px; margin-left: auto; margin-right: auto;”></div>
</div>

When adding a <div> tag with the float attribute within another <div tag>, always remember that the preceding tag should also have the float attribute applied to it.

<div style= “float: left; width: 600px;”>
<div style= “float: left; width: 300px;”></div>
</div>

The ‘float’ attribute in CSS solves a lot of your positioning problems on a web page. Though it has some limitations, it is still very effective.

Tags: Float Smoothly With CSS