How to Make a Floating Box in CSS

If you're new to cascading style sheets (CSS), one of the fundamental things you'll want to learn is how to make floating boxes. Just what are floating boxes? Well, they let an image, block of text or any other object move horizontally along your webpage. You see this in use anytime you look at a webpage that has text wrapped around an image. The image has been floated to either the left or the right of the page and that's why the text neatly curves along it.

Float Left

If you want to make an image float to the left, use the following code:

"img
{
float:left;
}"

Float Right

If you want to make an image float to the right, use the following code:

"img
{
float:right;
}"

You can see it's exactly the same as float left, we just changed "float:left;" to "float:right;".

Float None

If you don't want an image to float left or right, but you'd rather it be permanently fixed wherever it occurs on the page, use the following code:

"img
{
float:none;
}"

Float Inherit

Lastly, if you want an image to take on the float value of a parent object, you can use the following code to do so:

"img
{
float:inherit;
}"

As you can see, floating is pretty straight forward and simple. It is extremely easy to remember because whatever you want your - box to do is going to be the value you enter. To float to the left, just remember "float:left;". To float to the right, just remember "float:right;", and so on. It's important to note that the "float:inherit;" will not work with Internet Explorer 7 (IE7). It will not work with IE8 either unless you include a !DOCTYPE.

So, now that you know how to float objects in CSS you're ready to conquer the world… well, maybe not, but you can at least make a snazzy webpage with wrapped text. You could even make it about conquering the world, which is at least a start.