CSS Float

Similar to Position property, float is also used to position elements.


Applicable Values:


The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the ‘clear’ property).


Similar to ‘left’, except the box is floated to the right, and content flows on the left side of the box, starting at the top.


The box is not floated.


HTML Snippet:

<div id="testPage">
<div class="element float-left"> A </div>
<div class="element float-left"> B </div>
<div class="element float-left"> C </div>


CSS Snippet:

background-color : #e1e1e1;
height : 500px;
padding : 10px;
background-color : #ECB643;
width : 30px;
height : 30px;
margin : 10px;
padding : 10px;

float : right;



All the float elements will be queued on the right side with the first element on the right end.



Posted on July 22, 2014 in CSS

Share the Story

Leave a reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top