Floats and Positioning (v1)

Floats and Positioning (v1)

Introduction

A major question all CSS-ers have again and again is "how can I get this stupid element exactly where I want it to go on the page!?!?!". Traditionally, the answer lied in using floats and/or position attributes in combination with margins. You may still see this in use and may find it useful in some situations so we’ll start by learning about float based layouts. You’ll need to develop a mental model for what’s happening on the page when you float elements and when you use the different positioning types. Pay particular attention to which element acts as the parent of the element you’re messing with — there are some rules about that which get a bit confusing and can cause hair-pulling frustration. If you absolutely position an element inside an absolutely positioned element, where does the first element go?

Learning Outcomes

  • What is the DOM?
  • How do elements get placed in the DOM by default?
  • How can you override element positioning using the position attribute?
  • When are you able to use the top left right and bottom attributes?
  • What is the difference between float and position?
  • Which element acts as the parent for a floated element?
  • What is the difference between floating right and floating left?
  • If you have a bunch of elements floated next to each other and you make the browser narrower, what happens?
  • What’s the practical difference between relative and absolute positioning?
  • Which element acts as the parent for an absolutely or relatively positioned element?
  • How would you set up a grid of 20×20 boxes on the page using floats? Using lists?
  • What are negative margins useful for?

Study

1.1 Watch the next short video to get a first look at how ‘float’ works in CSS, and make sure to practice using the code below (uncomment each line to see the effect shown in the video)

A visual demonstration of how CSS float and clear actually works. If you’ve ever been confused about the float and clear property to arrange block elements – this is the video for you.

Duration: 3 minutes

Here’s the code that reflects the structure presented in the video. Play around with the lines with the float and clear commands.

<head>
  <style>
    #red {
      width: 100px;
      height: 100px;
      background-color: red;
      /* float: left; */
    }
    #green {
      width: 100px;
      height: 100px;
      background-color: green;
      /* float: left; */
    } 
    #blue {
      width: 100px;
      height: 100px;
      background-color: blue;
      /* float: left; */
      /* clear: left; */
    }
    #yellow {
      width: 100px;
      height: 100px;
      background-color: yellow;
      /* float: left; */
      /* clear: left; */
    }
  </style>
</head>
<body>
  <div id="red"></div>
  <div id="green"></div>
  <div id="blue"></div>
  <div id="yellow"></div>
</body>

1.2 Read CSS Floats 101 from A List Apart

  1. Read CSS Positioning 101 from A List Apart

  2. Play around with the Positioning Tutorial / Widget from BarelyFitz Designs to see the differences between different positioning schemes.

  3. Carefully go through the following articles on Centering Elements in HTML, and learn some of the fundamental CSS concepts and properties along with mastering the art of centering elements. It might not sound much, but you will be challenged to do this under various conditions as a Frontend developer.

4.1 Centering in CSS: A Complete Guide

4.2 Centering Things by W3C

4.3 How to Center Both Vertically and Horizontally

Real-world examples

  • FreshDesk Cookie Box (position: fixed, stays on bottom while scrolling the page)

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.

UPDATED: 19.01.2021

  • [19.01.2021] Added How browsers position floats article by Monica Dinculescu
  • [18.12.2020] Added video showing a visual representation of how float works along with relevant code