Learning Objectives

• Learn about the history of Web layout and the modern approaches to Web layout
• Understand and use the CSS display property
• Understand and use the CSS float property for its intended purpose

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” 1

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” 2

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

Question for Perspective: Grids

How long have grids been used in page layout?

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 HTML Grids

• Abuse of Tables
  • The HTML <table> element was created for the tabular display of data.
  • 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 but still not optimal

Today: FlexBox and Grid Layouts

• FlexBox layout allows much flexibility when placing elements about either a horizontal or vertical reference line
• Grid layout allows much flexibility when placing elements into a two dimensional grid.

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
• inline-block – a combination that respects widths
• 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.

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.

Float Practice

File: FloatPractice.html

• Float one of the images to the left and one to the right
• Do you need to modify other properties for this to work?
• Does it always look good?