Photoshop Templates

Featured Photoshop templates - professional ready to use designs for your next project.

View all templates

CSS Floats - CSS tutorial

The property float is used to make an element float to the right or to the left while having the text of a paragraph wrap around it.

Category: CSS tutorials - Difficulty:

The property float is used to make an element float to the right or to the left while having the text of a paragraph wrap around it. The entire box and its contents can be set to float either side you wish. Floats have the values; right, left or none.

Say, you want to insert an image to your site and you like to have a text-wrap around that image. All that you have to do is type this command:

<div id="picture">
<img src="URL" alt="Title">
</div>

<p>Here is where you type your paragraphs.</p>

Now to set the image to float either to the left or to the right and to have the text surround it, all you need to do is to define the width of the box where the image is and then set the property float to either left of right.

#picture {
float:left;
width: 100px;
}

CSS Floats and columns

In a document, floats can be used for columns by simply structuring the desired columns using the property

in the HTML code.

<div id="column1">
<p>The first paragraph goes here.</p>
</div>

<div id="column2">
<p>The second paragraph goes here</p>
</div>

<div id="column3">
<p>The third paragraph goes here.</p>
</div>

For example, you chose the width of the columns to be 40 percent. Next thing you do is to control the column to float either to the right or to the left by specifying the property float, like this:

#column1 { float:left; width: 40%; } #column2 { float:left; width: 40%; } #column3 { float:left; width: 40%; }