CSS Float Property

Floating images -- sounds cool, doesn't it? Don't get too hyped out of shape though, it's not like they drift all over space, but it is cool because it is useful.

To have text in between two pictures you used to have to use a table with a picture in the left cell, the text in the middle cell, and a picture in the right cell.

There is no table used here to place this text between the images, it's done by floating the pictures.

The primary advantage to floating images is simply that it takes less code; but there are two other nice advantages as well. First, an awful lot of people just don't like creating tables, especially nested tables. By adding a float property and value to the two images, the text that follows will flow between them without the need for a table. Secondly, by not using a table for layout control, or at least by using one less table, it means your web page will most likely download faster.

ť Here's how that was done:

<img src="images/image1.jpg" style="float:left">
<img src="images/image2.jpg" style="float:right">
...content here.

Where it says ...content here is where you enter your text. As long as the pictures aren't too big, so that there is room for the text, the text that follows two images coded to float like that will flow between the images. By simply adding:

style="float: left"   (or)    style="float: right"

...to any image, you create the floating style. You could also just float one image, left or right, and the text will flow around it. You can also add the float property to a table and float the table left or right, or both with two tables.

I did two other things in my example that I didn't show in the code example. I added the image width and height tags, which you should always do to help the page load faster; and I added:

hspace="12"   vspace="12"

...as an attribute and value to both images so there would be a cushion of space between the images and the text. So, the whole ball of wax really looks like this:

<img src="images/image1.jpg" 
    style="float:left" 
    width="120" height="200" 
    hspace="12" vspace="12">
<img src="images/image2.jpg" 
    style="float:right" 
    width="120" height="200" 
    hspace="12" vspace="12">
...content here.

Well now, that was pretty easy, wasn't it Uncle Wivvlesnorts?

Web Design

Site Information

More Boogie Jack Sites

CSS Float Property