CSS, Tutorial, Website Design

CSS – Float

Leave a Reply

Their is magic in Cascading Style Sheets. (Some properties more than others, but still magic.) Float is one of those CSS properties that really fundamental for any developer trying to create layouts without any tables.

CSS – Float Examples

There are three possible values for float: right, left and none. They are pretty self-explanatory, but here goes anyway:

Lets say you have a div that is 200px wide and 30px tall. Normally any content that comes after it would start at the bottom (30px bellow the top of the div.):

Here is the content that comes after the div.

If you float that same div to the right, all of the content that comes up after the div will show up on the left hand of the div (exactly like the content would come up next to a right-aligned picture):

Here is the content that comes after the div.

And vise versa if you float left:

Here is the content that comes after the div.

This is a very simple property, but you will use it in every CSS design you create. It is definitely a property you want to have ready to throw in to your CSS!

-CSS Everywhere!
-Ashton Sanders

Leave a Reply

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