Positioning with CSS Copy

Introduction to Positioning

One major issue that you might have already encountered is how to position exactly an element on the page. The solution to this issue used to lie in using floats and/or position attributes in combination with margins. You might still see this in use and sometimes it is useful.

For this reason we will start learning about float based layouts. You will need to learn what’s happening on the web page when we float elements and when we use different positioning types. It is really important to pay attention which element is the parent element of the element you are trying to position.

Learning Objectives

  • What the DOM is
  • How elements get placed in the DOM by default
  • How to override element positioning using the position attribute.
  • When we are able to use the top left right and bottom attributes
  • The difference between float and position
  • Which element acts as the parent for a floated element
  • The difference between floating right and floating left
  • What happens if we have a bunch of elements floated next to each other and we make the browser narrower.
  • The practical difference between relative and absolute positioning
  • Which element acts as the parent for an absolutely or relatively positioned element
  • How to set up a grid of 20×20 boxes on the page using floats and using lists
  • What negative margins are 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

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

Back to Lesson