How to Float text around by using CSS

Another way to manipulate the normal, static flow of your web pages is with the float property. You have already used this property in a previous section to wrap text around images. But you can also use the float property to have columns of text side by side. You can even use float to have navigations bars on the left and right of your pages. (We'll use float in our page layouts, which are coming up soon.)

As an example of column floating, have a look at the image below, taken from a browser:



So we have two columns of text side-by-side. The first one has a grey background so you can see the column better. It also has a 10 pixel margin. Here's the CSS:



And here's the HTML:



For the HTML, we've just used the DIV tags for two paragraphs of text. The first paragraph has the CSS class applied to it.

Notice two things about the CSS code, though. The first thing to notice is that we have used float: left. The second thing to notice is that we have set a width for the column of 200 pixels. If you don't set a width then any text you have for your column will simply flow from left to right.

There is a problem with our approach, however. Have a look at the columns in the browser again. Although they look nicely side-by-side, this is only because we manipulated the browser. We deliberately made it smaller so that the text resized itself. If we make the browser bigger, here's what happens:



The text in the second column will stretch from left to right to fill the available space.

To stop it doing that, you can add the class to the second DIV, as well:



Now both paragraphs of text are floated left, and have a width of 200 pixels. The browser can now be resized and the two columns will stay in place.

To start text on a new line underneath the columns, you can use the clear property in CSS, remember:

.clear {

clear: left;

}

This clears the float value and returns you to the normal, static flow. (You can replace left with right or both depending on your needs.)