CSS layout cheat sheet

Layout mechanics

Display Float Position

Controls how an element is Controls whether text is Gives strict, coordinate-based
represented within the flow. wrapped around the element. control over layout.

display: inline float: position: absolute

left|right|none

Allows other elements Move an element around

Allows other elements to based on coordinates.
beside; margin, padding &
wrap around the element.
width don't work.
position: relative
Multiple floats
display: block

Can create columns with

boxes touching sides. Added to a parent element to
Takes up an entire line; reset absolute child's
margin, padding & width coordinates.
clear:
work. left|right|both
position: fixed
display: inline-
block

Force the element below

floated elements. Forces an element to not
move when the page is
Allows other elements scrolled.
overflow: hidden
beside; margin, padding &
width work. Can create z-index
columns, but will force a
space between boxes.
Use on a parent element to
:
 Use on a parent element to
force it to wrap around the
floated children—a clearfix. Control the stacking order of
elements—higher number is
closer.

Centering elements

text-align: center margin: 0 auto vertical-al

Works only on display: inline & Works only on display: block Works only o
inline-block elements. elements. inline
Must be applied to the parent element. The element must have a width elements.
<figure class="img-box"> <div <ul>
<img class="box">Stegosaurus</div> <li
src="images/argentinosaurus.jpg"
alt=""> .box { <li>
<figcaption>The mighty width: 24em; /* Without a </ul
Argentinosaurus</figcaption> width `auto` won’t work */
</figure> margin-left: auto; ul li
margin-right: auto; display
.img-box { } block
text-align: center; vertical
} You can also specify just margin- middle
left: auto and margin-right: }
auto if you want margins on the top or
bottom.

Centering absolute Centering with float Centering with fl

Use transform & 50% coordinates to There's no float: center Flex box has
center an absolutely positioned element. You cannot center floated elements. alignment cl
<div class="banner"> always applie
<div class="content"> <div

<h1>Micropachycephalosaurus</h1> <h2>
<p>Longest dinosaur name <a
ever!</p> bones!
</div> </div
</div>
.card
.banner { display
position: relative; flex-dir
} column
justify-
.content { center
position: absolute; align-co
left: 50%; center
transform: translateX(-50%); align-it
} }
Or vertical centering too… This will be co
:
 Or vertical centering too… This will be co
.content { within the box
position: absolute; See the flexb
left: 50%; more details
top: 50%;
transform: translate(-50%, cheat-sheet/
-50%);
}

Common code

Border box Clearfix for float Flexible images

Used to change layout math Add to the parent elements Use width & display to
for width & padding. of floats to force the parent make images flex to their
Put at the top of every CSS to surround the floated parent's size.
file. element. img {
html { Can be used instead of display: block;
box-sizing: overflow: hidden width: 100%;
border-box; }
.clearfix::after {
}
content: " ";
display: block;
*, *::before,
clear: both;
*::after {
}
box-sizing:
inherit;
}
: