Cheatsheet: Side by Side Content

Nav bar, or other one dimensional content?


Flexbox is good for laying out items in one direction - usually horizontally, but vertically as well.

Lesson page

Grid of items, or other two dimensional content?


Grid is good for whole-page layouts, as well as any components that require structure both horizontally and vertically.

Lesson page

Images or elements that text should flow around?


float: left;

Floating an element allows subsequent elements in the same container to move up and flow around it. Elements can be floated to the left or right, and they must be "cleared" to prevent breaking the layout. See lesson page for details.

Lesson page

Elements or images that should sit in-line with text?

Inline or inline-block display

display: inline-block;

Lesson page