Emily Kauffman

Back to teaching

CIS 275 Lecture 15: Using Floats for Layout


  1. Floats
  2. Work on Homework


Hey everyone! Welcome to Lecture 15. Today's discussion will be a review on floats. We touched on this right before spring break, but that was almost a month ago! I have a number of videos on this class page illustrating how to use Floats. My recommendation is that you watch them while you follow along in your text editor. You can use dabblet.com (what I'm using in the video) or feel free to just do it in whatever text editor you're using. If you have questions, send me a message on Teams or post in the Lecture channel.

Mastery Exam Update

The Mastery Exam was meant to be an in-class coding exam where you show that you are proficient in laying out a web page using floats and positioning. That is no longer possible given the situation. Instead, I'll be assigning a mini-project that will focus on these same concepts. I will introduce the prompt on April 2nd and you will have until the following Thursday (April 9th) to complete it. It will be worth the same % of your final grade. More to come on April 2nd!

Review of Floats

  • With a float, the vertical alignment is normal (top of aligns with top of containing block element) but horizontal is adjustable.
  • Surrounding inline content will flow around opposite side.
  • Float property can be set to left, right, none, or inherit.
  • Remember: make sure width is specified, float elements can overlap other boxes, you can use the clear property to adjust

Simple Four Column Layout Using Float

Four Column Layout with Text, Padding, and Margin

Class Exercises

Make a post in the Team's Lecture 15 site. Post:

  1. A reflection. One thing you've learned from this week's exercises and what you think is the most interesting or useful.
  2. A question/confusion. One thing you're confused on or need further explanation of.
  3. Continue work on the homework. Again, it should be emailed to me by 11:50 PM on Sunday.