Website Designers and Webmasters

Dedicated to all the tasks Webmasters, Website Developers and Website Designers find themselves facing.

CSS – Float


Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 116

Warning: Use of undefined constant add_to_content - assumed 'add_to_content' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 117

Warning: Use of undefined constant add_to_page - assumed 'add_to_page' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 118

Warning: Use of undefined constant add_to_feed - assumed 'add_to_feed' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 119

Warning: Use of undefined constant limit - assumed 'limit' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 120

Warning: Use of undefined constant match_content - assumed 'match_content' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 121

Warning: Use of undefined constant exclude_pages - assumed 'exclude_pages' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 122

Warning: Use of undefined constant blank_output - assumed 'blank_output' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 123

Warning: Use of undefined constant exclude_categories - assumed 'exclude_categories' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 124

Warning: Use of undefined constant exclude_cat_slugs - assumed 'exclude_cat_slugs' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 125

Warning: Use of undefined constant title - assumed 'title' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 116

Warning: Use of undefined constant add_to_content - assumed 'add_to_content' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 117

Warning: Use of undefined constant add_to_page - assumed 'add_to_page' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 118

Warning: Use of undefined constant add_to_feed - assumed 'add_to_feed' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 119

Warning: Use of undefined constant limit - assumed 'limit' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 120

Warning: Use of undefined constant match_content - assumed 'match_content' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 121

Warning: Use of undefined constant exclude_pages - assumed 'exclude_pages' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 122

Warning: Use of undefined constant blank_output - assumed 'blank_output' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 123

Warning: Use of undefined constant exclude_categories - assumed 'exclude_categories' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 124

Warning: Use of undefined constant exclude_cat_slugs - assumed 'exclude_cat_slugs' (this will throw an Error in a future version of PHP) in /homepages/29/d199346440/htdocs/awiaf/websitedesign/wp-content/plugins/contextual-related-posts/contextual-related-posts.php on line 125

WiaF MascotTheir 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

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

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment