Difference between float and align property in CSS

Question

I am designing a website for my client and do not have much experience in web design and CSS. I also want to design it in standard CSS way.

The question is I am qui

Answer 1

Align - You use align to align text and other items rather it be left, right, centered, or justified. Align DOES NOT remove the item from the document flow.

Float - Floats an object to the left or right and REMOVES it from the document flow. (i.e. A thumbnail image with paragraph text flowing around it -- you will usually need to set some margins on the image so it looks right).

You will most likely be using float to lay the page out. I would suggest the useage of a grid system. Here is the easiest, most compatible grid system I know of to date. http://webdesignerwall.com/trends/960-grid-system-is-getting-old

Also you will need to understand what using the classes "first" and what the CSS clearfix does. You will also need to understand generating a baseline grid (vertical grid, not just horizontal) so that all elements not only line up left to right but up and down as well.

Answer 2

If you give float to the child div then the parent div becomes independent of the dimensions of child div i.e., the parent div will not increase its width and height automatically.(If you haven't given any dimensions to the parent div then it inherits width:0 and height:0)

Many designers face problems because of float because it is not friendly with layout but it is very useful. We can make the float friendly with layout by using css selector :after.

whereas if we give Text-align to the child div , the parent div will not be affected.

This is all I know.

Answer 3

align is a property to align a single element for table , text, span etc

float is a property to align block level elements like sidebar, div etc

Answer 4

"text-align" applies to the content of a box, while "float" applies to the box itself.

Answer 5

First I would like to suggest that you refer to the Head First series of CSS and HTML by O'Reilly publications. This is a must read book for those new to designing.

So, the float property is used to move a lot of blocks (for example your sidebar, your content area etc.) and the HTML align thing you are talking about, you can do the same in CSS in this way.

.test{
text-align: right; 
}   

The above code mentioned will be CSS and equivalent HTML code will be.

<div class="test"> This text will be aligned from right </div>    

For the time being refer to O'Reilly head first with HTML AND CSS, will help you a lot.