1.2.1: Layout

Learning Objectives

  1. CSS layout is about organising HTML elements into nested boxes and determining their positions

  2. CSS box model determines the size of each element on screen

  3. CSS display property controls the manner in which elements appear on screen, e.g. in horizontal or vertical order

  4. CSS position property allows us to position elements outside of the normal document flow, e.g. a fixed navbar or chat window

  5. Flexbox allows simple and robust layout of collections of HTML elements

Introduction

When determining how to layout elements with CSS, first organise elements into nested boxes, then determine which CSS styles need to apply to which boxes. By default browsers will render all HTML elements in a single vertical column.

CSS Box Model

The CSS box model controls how much space an element takes on screen with CSS properties such as content width, content height, margin (area outside border), border (area surrounding content) and padding (area inside border but outside content). While helpful for controlling exact size of HTML elements, we recommend using flexbox properties (covered in later submodule) to layout HTML elements for a more robust layout.

3 common ways to specify box dimensions

1) Pixel count

Only works for block display elements. Generally less recommended because difficult to create responsive (mobile and desktop-friendly) layouts with fixed pixel sizes.

p {
  width: 100px;
  height: 100px;
}

2) Percent of parent container

Percentage is relative to the parent container, allows responsive sizing. Percentage height does not work unless parent has fixed size.

p {
  width: 50%;
  height: 100px;
}

3) Percent of viewport (window)

Viewport sizing allows for most responsive sizing based on screen size, but needs to be coordinated with other elements on screen since sizing is not relative to other elements.

p {
  width: 100vw;
  height: 100vh;
}

W3Schools documents all ways to specify box size.

Debugging CSS boxes

Chrome helps us visualise CSS box properties of every element on every page at the bottom of the Styles window in the Elements tab in Chrome DevTools. To see box properties of any HTML element, right click the element and click "Inspect". Box properties in the box visualisation should match the most-specific box properties at the top of the CSS styles list (ordered in decreasing specificity).

Apply box-sizing CSS property to include padding and border in box size

CSS does not include padding and border in box size by default. In the following example, CSS produces a box 300px wide (including 50px of padding on both sides), even though we specify width of 200px.

p {
  width: 200px;
  padding: 50px;
}

To make width and height include padding and border space, apply the box-sizing CSS property to all elements.

* {
  box-sizing: border-box;
}

More on box-sizing by W3Schools.

CSS display Property

The CSS display property controls the way target elements render on screen. The 2 most basic display values are block (full screen width) and inline (width of element only). By default, every HTML element has either block or inline layout.

inline-block is a 3rd display property that enables inline elements with block properties such as spacing on all sides. inline elements cannot have custom spacing around them.

Centring elements on screen

The margin property's auto value allows us to automatically set left and right margins to centre an element on screen. inline elements cannot be centred because inline elements cannot have margin settings.

.main {
  margin: 0 auto; /* 0 top and bottom margin, auto left and right margin */
}

Constraining element width

We may also want to constraint element width to prevent content from becoming hard to read across the full width of a horizontal screen. We will look at fixed, percent and max width layout to do this. Width settings do not apply to inline elements.

Fixed-Width Layout

Fixed-width layout fixes the width of the target element, regardless of how small or large the screen size is. This works for large screen sizes but may look poor on small screen sizes.

.main {
  width: 600px; /* 600px is reasonable default width of centre column */
  margin: 0 auto; /* 0 top and bottom margin, auto left and right margin */
}

Percent-Width Layout

Percent-width layout fixes width to be a percentage of screen width. This makes our content responsive but may not be what we want, especially if we want layout to be different across mobile and desktop.

.main {
  width: 80%;
  margin: 0 auto; /* 0 top and bottom margin, auto left and right margin */
}

Max-Width Layout

Max-width layout allows our element to occupy 100% of screen width at smaller screen sizes but only a specified width at larger screen sizes. This helps when we wish to maximise screen real estate on mobile devices but not make content too wide on desktop devices.

.main {
  max-width: 600px; /* be 100% width, until 600px */
  margin: 0 auto; /* 0 top and bottom margin, auto left and right margin */
}

CSS position Property

The CSS position property allows us to position HTML elements outside the normal "flow" of an HTML document. We can use position: fixed to fix a navbar to the top of a screen even when we scroll down; We can use position: absolute to position a counter at the top right corner of a notification icon.

Position Offset Properties

Position offset properties top, right, bottom, left set the relevant offset from the element's position. We can use any CSS unit to express offset.

p {
  top: 300px; /* Offset p elements by 300px from the top of where they would be */
}

position Property Values

There are 5 position property values: static, relative, fixed, absolute and sticky. static is the default property for all elements with no explicit position value. relative is relative to where the element would have otherwise been. fixed is a fixed position on screen regardless of where the user scrolls. absolute is relative to the closest explicitly-positioned ancestor element. sticky is a combination of relative and fixed. Read more about each value and how to use them at W3Schools.

z-index

When playing with position values its possible we will have elements in front of and behind each other on screen. By default the overlapping element mentioned last in the HTML document will be in front. To alter elements' relative forward and backward positions on screen, use the CSS z-index property.

Flexbox

Flexbox allows simple and robust layout of collections of HTML elements. Without specifying specific distances or percentages, flexbox allows us to position elements in vertical or horizontal order, at the start, middle or end of their container, grouped together or spaced evenly apart, with or without specific ratios between elements.

To use flexbox we need to set "flex properties" on both containers of the elements we wish to position and and the elements themselves. The containers are known as "flex containers" and the elements they contain are known as "flex items".

Exercises

  1. Watch Flexbox in 100 Seconds video to know what flexbox is

  2. Complete W3Schools flexbox tutorial to read about and play with basic flexbox

  3. Review CSS Tricks flexbox cheatsheet on all flex container and flex item CSS properties

  4. Complete Flexbox Froggy game to practise flexbox

  5. (Optional) Complete Flexbox Defense game to practise flexbox

Last updated