Floating images

See more about:

Where are we?

You learned how to put an image on a page. You know how to put a border around it, with margins and padding. Time for more image fun.

This lesson’s goals

By the end of this lesson, you should know how to move an image to the left or right of a page, and have text wrap around it.

The goal

You’ve seen pages like this:

Renata

Blah blah blahity blah blah. Blah blah blahity blah blah. Blah blah blahity blah blah blah blah. Blah blah blahity blah blah.

Blah blah blahity blah blah. Blah blah blahity blah blah blah blah. Blah blah blahity blah blah blah blah. Blah blah blahity blah blah. Blah blah blahity blah blah. Blah blah blah blah blahity blah blah. Blah blah blahity blah blah.

Blah blah blahity blah blah. Blah blah blahity blah blah. Blah blah blah blah blahity blah blah. Blah blah blah blah blahity blah blah. Blah blah blahity blah blah.

Figure 1. Image floated left

The image is on the left of the page, and text wraps around it. There’s a small gap between the image and the text.

The image could be on the right:

Renata

Blah blah blahity blah blah. Blah blah blahity blah blah. Blah blah blahity blah blah blah blah. Blah blah blahity blah blah.

Blah blah blahity blah blah. Blah blah blahity blah blah blah blah. Blah blah blahity blah blah blah blah. Blah blah blahity blah blah. Blah blah blahity blah blah. Blah blah blah blah blahity blah blah. Blah blah blahity blah blah.

Blah blah blahity blah blah. Blah blah blahity blah blah. Blah blah blah blah blahity blah blah. Blah blah blah blah blahity blah blah. Blah blah blahity blah blah.

Figure 2. Image floated right

Let’s see how you do that.

Basic floating

Check out this code:

.left {
  float: left;
}
...
<p>
  <img src="renata.png" alt="Renata" class="left">
  Once upon a time, there was a dog named Renata. Renata
  was a happy hound. She liked to play, digging holes, 
  pulling ropes and chasing balls.
</p>

Figure 3. Floating left

There’s a paragraph from lines 5 to 10. The first thing inside the <p> is an <img> (line 6). It’s given a class of left. left is defined in the CSS, on lines 1 to 3.

float:left is applied to the image. Here’s what it looks like:

Floating left - result

Figure 4. Floating left – result

You can look at the page.

That’s all there is to it. The float property moved the image to the left.

Suppose I change the code to this:

.right {
  float: right;
}
...
<p>
  <img src="renata.png" alt="Renata" class="right">
  Once upon a time, there was a dog named Renata. Renata
  was a happy hound. She liked to play, digging holes, 
  pulling ropes and chasing balls.
</p>

Figure 5. Floating right

Line 2 says right instead of left. It looks like this:

Floating right - result

Figure 6. Floating right – result

You can try it.

Renata
Renata

Look at the code. You named the class left in Figure 3, and right in Figure 5. Did you have to do that?

Kieran
Kieran

No, I could have named the class anything. This would work the same:

.llama {
   float: left;
}
...
<img ... class="llama">

Or this:

.leaping_lemons {
   float: left;
}
...
<img ... class="leaping_lemons">

I named the classes left and right to describe what they do. It makes it easier to understand the HTML.

Adding whitespace

Here’s the image floated left:

Floating left - result

Figure 4 (again). Floating left – result

The text is right up against the image. It doesn’t look very good.

I can use the box model you just learned about to fix that. Suppose I changed the class to:

.left {
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}

Figure 7. Making a gap

I’ve added a 10 pixel margin to the right of the image, and to the bottom of the image. Here’s what it looks like:

Making a gap - result

Figure 8. Making a gap – result

You can try the page.

Adding a border

As well as margin, the padding and border properties work on a floated image. Use them to make borders. Let’s say I wanted this:

With a border

Figure 9. With a border – result

There’s a small gap between the image and the border, then another gap between the border and the text.

Here’s the class:

.left {
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 3px;
  border: 1px black solid;
}

Figure 10. With a border

You can try it.

The padding (line 5) adds the gap between the image and the border. The margin (lines 3 and 4) adds the gap between the border and the text.

Renata
Renata

A question.

Look at the gap between the bottom of the border and the text in Figure 10:

Vertical gap

Why is it so large?

Kieran
Kieran

The margin below the border drops just a little into the line of text starting with “the.” The browser won’t draw part of a line of text, so it drops down to the next line, leaving that big gap.

It’s hard to control this vertical gap precisely. It depends on the size of the font, whether the user has zoomed in, and other things.

Exercise: The dog party

Project Gutenberg is a collection of literary works that are not under copyright in the United States. Take a story from the collection, and float some illustrations left and right.

I used The Dogs’ Dinner Party, by an unknown author. Have a look at the original. You can use another story, if you want.

The story includes text and images. I only used a small part of the story. You can use more if you want. I shrank the images to this:

Writing invitations
Receiving an invitation

Figure 1. Smaller images

Float your images to the left and right, with a gap between images and text. Here is part of what I made:

Result

Figure 2. Result

Create your own story page, with the look you want. Make sure you float some images to the left, and others to the right.

Upload your work to your server. Enter the URL.

(Log in to enter your solution to this exercise.)

Summary

  • You can float images left and right with the float property. Text wraps around the image.
  • Use the margin property to put space between the text and the image.
  • Use the border property to add a border to the image. Use padding to add space between the image and the border.

What now?

Let’s add captions to image.


How to...

Lessons

User login

Log in problems? Try here


Dogs