Difference Between Float and Align Property in CSS

Difference between float and align property in CSS

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.

CSS : what is the difference between float: left or align: left?

See MDN which has a convenient list of all CSS properties.

float pushes the element it is applied to to the side and allows content that follows it to bubble up beside.

align is not a CSS property and will be ignored.

---

The type of document level layout it sounds like you want to do is usually best achieved with Flexbox or Grid.

Any difference between aligning elements in a float div versus a regular div?

If I understand you correctly, you are trying to centrally align all the elements (p, img, and a) inside the floated div.

Out of the 3 html elements you specified, <p> is a block level element, but <img> and <a> are inline elements. In order for you to use margin: 0 auto all the elements should have a width specified. And the width can only be specified for the block level elements.

So you can use the property display: block for the inline elements like a and img which will convert them to a block level element. And then you can specify the width property for all the elements inside the div (including p, a, and img). Once the width for all the elements are specified, now you can use margin: 0 auto and it should work perfectly fine.

If you want the text inside the div to be centrally aligned all the time, then you can use the css property called text-align: center on the div.

Difference Between 'display: block; float: left' vs. 'display: inline-block; float: left'?

An answer by @thirtydot might help you... Question's link

I just found out that floating an
element will also make it a block,
therefore specifying a float property
and display:block is redundant.

Yes, display: block is redundant if you've specified float: left (or right).

(What would happen if you tried to
specify display:inline and float:left?
)

display: inline will not make any difference, because setting float: left forces display: block "no matter what":

http://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo

Otherwise, if 'float' has a value
other than 'none', the box is floated
and 'display' is set according to the
table below.

To summarize said table: float = display: block.

However, your specific example of float: left; display: inline is useful in one way - it fixes an IE6 bug.

Are there any other examples of
redundant combinations to watch out
for? block & width ? etc,

Some examples:

• If you set position: absolute, then float: none is forced.
• The top, right, bottom, left properties will not have any effect unless position has been set to a value other than the default of static.

Is there a tool that can check for
such things?

I don't think so. It's not something that is ever needed, so I can't see why anybody would have written such a tool.

Is there any difference between float: none and clear: none

Float:none; tells the elements that you do not wish for it to float.

Clear tells other elements whether they should be allowed to float or not, and in the case of none, you're allowing floats on both sides. it's why when you use clear:both; that floating stops.

HTML/CSS Align objects in center with float

if you use float:left it will ignore the property text-align:center so you can use display:inline-block instead of float:left it will work perfect.

Try once!

Float left and text-align center

Instead of margin, give your div this instead:

position:absolute;
width:100%;
text-align:center;

position:absolute will make sure it's the center of the screen, and not the center of whatever space is left on the right of the form.

DEMO

---

Related Topics