Floats & Images: Free HTML & CSS Tutorial

Topics covered in this HTML & CSS tutorial:

Adding a hero image, Fluid images, Floating images, Class selectors, Margins

Exercise Preview

Exercise Overview

In this exercise, you’ll add some images and learn how to position them alongside text by using the float property. Additionally, you’ll review the CSS class selector.

1. If you completed the previous exercise, sanfran.html should still be open, and you can skip the following sidebar. If you closed sanfran.html, re-open it now. We recommend you finish the previous exercises (3B–3C) before starting this one. If you haven’t finished them, do the following sidebar.

   If You Did Not Do the Previous Exercises (3A–3B)

   1. Close any files you may have open.
   2. On the Desktop, go to Class Files > Web Dev Class.
   3. Delete the Revolution Travel folder if it exists.
   4. Duplicate the Revolution Travel Ready for Floats folder.
   5. Rename the folder to Revolution Travel.

Adding a Hero Image

In web design lingo, a hero image is a large banner-style image prominently placed at the top of a webpage. Its purpose is to provide a sort of visual overview of the page’s content. Let’s add a hero image to our page about visiting San Francisco.

1. In sanfran.html, add an image inside main, above the h1 tag:

   <main>
      <img src="images/san-fran-lombard.jpg" alt="San Francisco Landmark: Lombard Street">
      <h1>Featured Location: San Francisco, California</h1>
   

2. Save the file and preview it in a browser to see the image.
3. Looks good! Resize the window from wide to narrow and notice the image does not scale down to fit within the window. Let’s fix that.
4. Return to your code editor.

5. In the style tag at the top, below the body rule, add the following new rule:

   body {
     font-family: sans-serif;
   }
   img {
      max-width: 100%;
   }
   

   This max-width ensures images will not be wider than 100% of the width of its parent container. It will not scale images up beyond their native width, but will scale them down to fit within their container. For this to work properly, you should remove the width and height attributes on any img tags that might be scaled.

6. Save the file and preview it in a browser.

7. Resize the window and make sure the image scales down to fit within the browser window. Perfect!

Adding More Images

1. Return to sanfran.html in your code editor.
2. A couple paragraphs below the hero image, find the h2 for Things to Do. We’ll add three images to this section of the page.

3. Add the first image inside the paragraph that starts with Being on Alcatraz Island:

   <p><img src="images/logo-alcatraz.jpg" alt="Alcatraz Cruises"> Being on Alcatraz Island is a unique experience... 
   

4. In the next paragraph (which begins with Fisherman’s Wharf) add the following image:

   <p><img src="images/logo-fishermans-wharf.jpg" alt="Fisherman's Wharf"> Fisherman's Wharf is one of San Francisco's most...
   

5. In the next paragraph (which begins with For a great outdoor activity) add the following image:

   <p><img src="images/logo-blazing-saddles.jpg" alt="Blazing Saddles"> For a great outdoor activity that involves exercise, rent a bike!...
   

6. Save the file, return to the browser, and reload the page.

7. There should be three images, each at the beginning their respective paragraphs. Notice the awkward alignment. We’d like the images to “float” alongside the text on the left and right (like text wrap in a print layout), so we’ll use CSS float property.

Floating the Images with Class Selectors

1. Return to sanfran.html in your code editor.

   If the goal was to float all images on the page to the left of the text (or, for that matter, to the right of the text), we could create a new rule for the img tag. Using a tag selector allows us to target all of the same type of element with the same style.

   The goal here, however, is to float just some of the images on the page. What’s more, we’d like some to float left and others to float right. Class selectors are the best selector for the job. We can assign them just to specific elements and we can reuse them as many times we need, wherever we like on the page.

2. Right before the closing </style> tag, after the rule for footer, add the following new rule. (Remember the dot before img-left is what makes it a class selector.)

      footer {
         width: 90%;
         max-width: 800px;
      }
      .img-left {
         float: left;
      }
   </style>
   

3. Now that you created a new rule, you need to assign the class to the images you actually want to float left. Find the image tag for the Alcatraz Cruises logo, and add the following bold class attribute and value:

   <img src="images/logo-alcatraz.jpg" class="img-left" alt="Alcatraz Cruises">
   

4. Save the file, return to the browser, and reload the page.
5. Scroll down to the Things to Do section. The Alcatraz Cruises logo should be to the left of the text. Let’s add another rule to float the next image to the right.

6. Return to sanfran.html in your code editor and just after the rule for .img-left, add the following new rule (in bold):

      .img-left {
         float: left;
      }
      .img-right {
         float: right;
      }
   </style>
   

7. Now let’s assign the class to the image you want to float right. Find the code for the Fisherman’s Wharf logo and add the following bold code:

   <img src="images/logo-fishermans-wharf.jpg" class="img-right" alt="Fisherman's Wharf">
   

8. While you’re here, let’s make the third image float left to match the first image. On the Blazing Saddles image, add the following bold code:

   <img src="images/logo-blazing-saddles.jpg" class="img-left" alt="Blazing Saddles">
   

9. Save the file, return to the browser, and reload the page.

10. Scroll down to see the three images floating nicely beside their paragraphs. The graphics are close to the text, so let’s add a margin to improve the spacing.

Adding Margin to the Floated Images

1. Return to sanfran.html in your code editor.

2. Add the following margin property to the .img-left rule:

   .img-left {
      float: left;
      margin-right: 15px;
   }
   

3. Also add margin to the .img-right rule as follows:

   .img-right {
      float: right;
      margin-left: 15px;
   }
   

4. Save the file, return to the browser, and reload the page to see the improved layout.