CSS layout cheat sheet

Controls how an element is represented within the flow.

display: inline

Allows other elements beside; margin, padding & width don’t work.

display: block

Takes up an entire line; margin, padding & width work.

display: inline-block

Allows other elements beside; margin, padding & width work. Can create columns, but will force a space between boxes.

Controls whether text is wrapped around the element.

float: left|right|none

Allows other elements to wrap around the element.

Multiple floats

Can create columns with boxes touching sides.

clear: left|right|both

Force the element below floated elements.

overflow: hidden

Use on a parent element to force it to wrap around the floated children—a clearfix.

Gives strict, coordinate-based control over layout.

position: absolute

Move an element around based on coordinates.

position: relative

Added to a parent element to reset absolute child’s coordinates.

position: fixed

Forces an element to not move when the page is scrolled.

z-index

Control the stacking order of elements—higher number is closer.

Works only on display: inline & inline-block elements.

Must be applied to the parent element.

<figure class="img-box">
  <img src="images/argentinosaurus.jpg" alt="">
  <figcaption>The mighty Argentinosaurus</figcaption>
</figure>

.img-box {
  text-align: center;
}

Works only on display: block elements.

The element must have a width

<div class="box">Stegosaurus</div>

.box {
  width: 24em; /* Without a width `auto` won’t work */
  margin-left: auto;
  margin-right: auto;
}

You can also specify just margin-left: auto and margin-right: auto if you want margins on the top or bottom.

Works only on display: inline & inline-block elements.

<ul>
  <li>Pteranodon</li>
  <li>Quetzalcoatlus</li>
</ul>

ul li {
  display: inline-block;
  vertical-align: middle;
}

Use transform & 50% coordinates to center an absolutely positioned element.

<div class="banner">
  <div class="content">
    <h1>Micropachycephalosaurus</h1>
    <p>Longest dinosaur name ever!</p>
  </div>
</div>

.banner {
  position: relative;
}

.content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Or vertical centering too…

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

There’s no float: center

You cannot center floated elements.

Flex box has a bunch of different alignment classes—that are always applied to the parent.

<div class="card">
  <h2>Edmontosaurus</h2>
  <a href="#">See the bones!</a>
</div>

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;
}

This will be completely centered within the box.

See the flexbox cheat sheet for more details.

Used to change layout math for width & padding.

Put at the top of every CSS file.

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

Add to the parent elements of floats to force the parent to surround the floated element.

Can be used instead of overflow: hidden

.clearfix::after {
  content: " ";
  display: block;
  clear: both;
}

Use width & display to make images flex to their parent’s size.

img {
  display: block;
  width: 100%;
}