CODEWITHSUNDEEP
css
J.K.A.
J.K.A.

Reputation: 7404

Difference between float and align property in CSS

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 quite confused with CSS align property and float property. I know there is much difference between these two properties but I am still not able to handle it correctly at the time of development.

Can anyone explain to me the exact difference between these two properties?

Upvotes: 33

Views: 45794

Answers (6)

UserName Name
UserName Name

Reputation: 313

text-align applies to the text in the container, while float applies to the container itself. Example:

div {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

.textAlign {
  text-align: right;
}

.float {
  float: right;
}
<div class="textAlign">text align example</div>
<br>
<div class="float">float example</div>

Upvotes: 0

Prerit Mohan
Prerit Mohan

Reputation: 528

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.

Upvotes: 10

eusid
eusid

Reputation: 769

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.

Upvotes: 17

Web Designer cum Promoter
Web Designer cum Promoter

Reputation: 1336

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

Upvotes: 1

Mr_Green
Mr_Green

Reputation: 41842

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.

Upvotes: 3

Ganesh Bora
Ganesh Bora

Reputation: 1153

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

Upvotes: 40

Related Questions