Floating objects

The image you entered in this section was floated to the right but it is also possible to float an object to the left.

Floating your objects allows better use of space. Rather than having large bands of blank space down the side of an image it can be used so that the image occurs in a context and facilitates better flow for your readers.

There may be situations where you would like your image to have blank space down its side or for only a few lines to run beside it such as for holiday snaps with a brief descriptor.

In these cases you need to add a clear: statement to a styling for the first following paragraph or item you don't want to run beside the image.

p.endfloatl { clear: left; }

Eiffel Tower

Paris is lovely in the spring.

The Eiffel tower is much less busy so we went to the top.

Prague though is nicer because it is a little warmer and the tourists haven't arrived yet.

To produce this effect the coding is as follows.

<p><img class="fleft" src="cssimages/eiffel.jpg" width="94" height="142" alt="Eiffel Tower" /></p>
<p>Paris is lovely in the spring.</p>
<p>The Eiffel tower is much less busy so we went to the top.</p>
<p class="endfloatl">Prague though is nicer because it is a little warmer and the tourists haven't arrived yet.</p>

Valid XHTML 1.0 Transitional

Images

Images add interest to your site. To maximize their impact style their placement and spacing as well as how the surrounding text interacts with them.

  1. Obtain an image no larger that 300px X 300px (doing a search in google and clicking images is a good way to do this) and save it to the same folder that your .html file is in.
  2. Insert this image in your .html file (a space has been earmarked in the provided file). Remember to include the dimensions and an alt= statement e.g.:

    <p><img src="pony.jpg" alt="my very own pony" width="282" height="217" /></p>

  3. Before moving on, change the background-color and color in the body tags back to white and black respectively. This will assist you in seeing the changes you will make in the next sections.

    body { background-color: #fff;
    color: #000;

  4. Go to your browser and open or refresh your .html file. Your image should now be visible. By default it will be sitting on the left hand side of the screen.
  5. Open your .css file and add this command:

    body { background-color: #000;
    color: #fff; }
     
    p.red { color: #f00; }
     
    span.bold { font-weight: bold }
     
    img { border: 3px solid #000;
    float: right; }

  6. Go to your browser and open or refresh your .html file. Your image should now be sitting on the right hand side of the screen with a thin white border around it.

    Although the image now resides on the left it hasn't just been moved there, it has been "floated". The implications of this are shown in the next step

  7. Open your .html file. Enter a few paragraphs of text immediately beneath the line of code containing your image. It doesn't matter what this is it just needs to be a few paragraphs about dozen lines or so total.

    <p><img src="pony.jpg" alt="my very own pony" width="282" height="217" /></p>
    <p>A pony is most commonly a certain breed of small horse, generally...
    The term "pony" can be used in general...</p>

  8. Go to your browser and open or refresh your .html file.. Your image should now be sitting on the right hand side of the screen with the text from your paragraphs flowing around it. This is what "floating" an image does.

    Notice though, that the words are butted up hard against the edge of the picture border. This is something that can be changed through the manipulation of margins and padding; the focus of the next section.

Next section: Spacing →