Skip to main content
Version: WIP

✏️ 1.1.3.6 Practice: Using Floats

Goal: In the Laying out with floats lesson, we learned how to use floats to:

  • Wrap text around an image
  • Create sidebars
  • Create pages with multiple columns

In this exercise we'll practice these concepts by creating new webpages, and utilizing floats to organize their layouts.

Warm Up​

  • What different options are available when using floats?
  • What can be accomplished with floats?

AI Support: Stuck on a float layout? After trying the warm-up questions, you can ask AI to explain what to check next. Do not ask AI to build your practice projects for you.

Example prompts:

  • Weak: "Fix my float layout."
  • Strong: "My columns are overlapping after I added floats. Can you explain 2–3 things I should check—without writing the CSS fix for me?"

Before asking, check: Do I have the license for this? See Using AI Responsibly at Fidgetech and How to Ask for Help.

Try asking AI: "Can you explain the difference between float: left and float: right and when I'd choose each—without writing CSS for me?"

After reading AI's response, explain the concept back in your own words before moving on.

Code​

Meet the goal by completing one of these projects. Make sure to make commits regularly and push to the project's remote repository on GitHub.

Floats Practice​

Practice using floats to position images, create sidebars, and make column layouts. Again, don't forget to create a separate folder for each project below, make commits regularly and push all changes to a remote repository on GitHub.

Band Website​

  • Create a website for your favorite band.
  • Add a sidebar for upcoming shows and style it so it stands out on the page.
  • Add images to the webpage and float them either to the left or right.

Interior Decorator Website​

  • Create a webpage for an interior decorator.
  • Use floats to make columns to display information and pictures for "before", "during" and "after" renovations.

Checkpoint​

Before moving on, you should be able to:

  • Wrap text around an image using floats
  • Create a sidebar layout using floats
  • Create a multi-column layout using floats

If you're unsure, re-read the Using Floats lesson or ask AI: "My columns are overlapping after I added floats. Can you explain 2–3 things I should check—without writing the CSS fix for me?"