CSS floats are a very useful tool in the web design world. They allow us to position elements next to each other that would otherwise be lined up from top to bottom without a float. For example, let's say that you have two div elements on your page that you want to display side by side. This is where CSS floats come in. A float will allow you to set your divs next to each other without having them interfere with one another.

When I first started using CSS I was a bit confused by how floats worked. It's actually a very simple styling element to implement on your pages and it really helps make things look more professional. You can use floats on things like div elements as well as images. So if you need to wrap text around an image you'll need to get familiar with floats.

To begin, you'll need to create a CSS class that can be applied to your image or div element. A class is anything in your CSS code that starts with a period. For example, if you had .float in your CSS file that would mean you've created a class called "float". Using classes makes it very easy to apply the same styling to multiple elements on a page just by adding class="float" to your HTML code. This will keep you from having to write the float command over and over again.

Once you've created your class (which can be named anything) you'll need to specify the float parameters. This means that you'll have to decide if you want to float something on the left or right. For example, let's say you have a paragraph that you want to add a picture to. You want that picture to appear on the left side of the text while the text wraps around it on the right. All you have to do is write float: left; in your CSS file. This will tell the image to float to the left of the text and allow the text to flow around it.

Since it will be easier to demonstrate this with an actual example, check out the video below. In the video you'll learn how to perform some basic float commands that you'll utilize on a regular basis when coding your websites.



Patrick writes on a wide variety of topics including web design.

About The Author

Related Pages

Connect With Ubscure

Print This Article