CSS Layout

Dr. Greg Bernstein

Updated September 8th, 2019

CSS Layout and Floats

Readings

  1. CSS layout

  2. Introduction to CSS Layout

  3. Floats

Reference/Further Information

  1. All about Floats

  2. Invisible CSS. Good review and in depth look at important CSS concepts.

Overview

From MDN:

CSS page layout techniques allow us to take elements contained in a web page and control where they are positioned relative to their default position in normal layout flow, the other elements around them, their parent container, or the main viewport/window.

Normal Flow

From MDN:

The elements that appear one below the other are described as block elements, in contrast to inline elements, which appear one beside the other, like the individual words in a paragraph.

Changing the “Flow”

Normal flow is how the browser lays out HTML pages by default when you do nothing to control page layout.

HTML is displayed in the exact order in which it appears in the source code, with elements stacked up on top of one another

Changing the “Flow”

We’ll use three CSS properties to change the “normal flow”: float, position, and display.

A History of Grids

  • Grid systems have been used to layout books, newspapers, advertisements, etc. since the origins of writing and drawing!
  • This approach is used by designers today for web pages, apps, and GUIs.
  • Various methods have been used to create “grid systems” for web pages/apps.

Earliest Grids: Abuse of Tables

  • The HTML <table> element was create for the tabular display of data.
  • Many sites at the dawn of the web used tables instead for page layout
  • You may still see some of this lingering in the output of legacy systems.
  • This approach has been abandoned. It has many issues.

Float Based Grids: Standards Based

  • Folks came up with grids based on CSS floats
  • Advantage: they were standards based and somewhat more flexible.
  • Many CSS frameworks offered float based grid systems to make them easier to use.
  • Issues: there were still layout tasks that are hard or impossible to do well with such systems.

Today: FlexBox and Grid Layout

  • We will learn about FlexBox layout
  • Currently (February 2019) many CSS Framework provide grid systems based on FlexBox layout for the best browser compatibility.
  • We will learn the new standard Grid layout

The CSS display Property

display

From display

The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet.

Block, Inline or …

We can use the display property to change the defined layout of an element

  • block – Forces “block” layout, one item over another
  • inline – Forces “inline” layout, one item next to another
  • Other values are available (legacy)

Layout Choices with display

  • display: flex; for FlexBox layout within this element (container)
  • display: grid; for Grid layout within this element (container)
  • Both flex and grid have many, many additional properties that can be set on both container and contained elements.

display: none

From MDN:

In addition to the many different display box types, the value none lets you turn off the display of an element; when you use none, all descendant elements also have their display turned off.

Floats

History

Originally, the float property was introduced to allow web developers to implement simple layouts involving an image floating inside a column of text, with the text wrapping around the left or right of it.

Image Float example

<style>#Foil {width:40%; float:left}</style>
<img src="MikePercyFoiling.jpg" id="Foil" ><p>Foiling is the newest
and greating thing to hit sailing...</p>

Image Float Live

Foiling is the newest and greating thing to hit sailing. Everyone is doing it! Yes, kiters (kite boarders), windsurfers, Americas cup yachts, and even your Professor.

Float Functionality

  • The element with the float set on it is taken out of the normal layout flow of the document and stuck to the left (we set float:left) hand side of its parent container.

  • Any content that comes after the floated element in the normal layout flow will now wrap around it, filling up the space to the right hand side of it as far up as the top of the floated element.