Exit tutorial


HTML Tutorial
Cascading Style Sheet Tutorials
Floating Image Styles
Floating Style, sounds cool doesn't it? Don't get too hyped, it's not as cool as 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 on either side.

The advantages to using floating styles are that it takes less code, and secondly, an awful lot of people just don't like creating tables. By simply adding a float property and value to the two images, the text that follows will flow between them.

Here's how it's done:

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

The text here would appear between those code example images on a web page. By simply adding:

style="float: left"   OR   style="float: right"

...to any image, you create the floating style.

I did two other things in the real example that I didn't show in the code example. I added the image width and height tags to help the page load faster, and I added:

hspace="12"   vspace="12"

...as an attribute and value to both images so there is a cushion of space between the images and the text. So the whole ball of wax 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">

[Back to the Stage 6 Index]