1/5/2020 CSS layout cheat sheet · Web Dev Topics · Learn the Web

CSS layout cheat sheet

https://learn-the-web.algonquindesign.ca/topics/css-layout-cheat-sheet/ 1/7
1/5/2020 CSS layout cheat sheet · Web Dev Topics · Learn the Web

Layout mechanics

Display Float Position

https://learn-the-web.algonquindesign.ca/topics/css-layout-cheat-sheet/ 2/7
1/5/2020 CSS layout cheat sheet · Web Dev Topics · Learn the Web

Controls how an element is represented within the Controls whether text is wrapped around the Gives strict, coordinate-based control over layout.
flow. element.  
    position: absolute
display: inline float: left|right|none

Move an element around based on

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

Can create columns with boxes touching sides.

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

Force the element below floated elements.

 
overflow: hidden

https://learn-the-web.algonquindesign.ca/topics/css-layout-cheat-sheet/ 3/7
1/5/2020 CSS layout cheat sheet · Web Dev Topics · Learn the Web

Allows other elements beside; margin, Forces an element to not move when the page
padding & width work. Can create columns, is scrolled.
but will force a space between boxes.  
z-index

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.

https://learn-the-web.algonquindesign.ca/topics/css-layout-cheat-sheet/ 4/7
1/5/2020 CSS layout cheat sheet · Web Dev Topics · Learn the Web

Centering elements

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

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

Centering absolute Centering with float Centering with flexbox

There's no float: center Flex box has a bunch of different alignment
You cannot center floated elements. 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.
(/topics/flexbox-cheat-sheet/)

Use transform & 50% coordinates to

center an absolutely positioned element
https://learn-the-web.algonquindesign.ca/topics/css-layout-cheat-sheet/ 5/7
1/5/2020 CSS layout cheat sheet · Web Dev Topics · Learn the Web
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%
);
}

https://learn-the-web.algonquindesign.ca/topics/css-layout-cheat-sheet/ 6/7
1/5/2020 CSS layout cheat sheet · Web Dev Topics · Learn the Web

Common code

Border box Clearfix for float Flexible images

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

https://learn-the-web.algonquindesign.ca/topics/css-layout-cheat-sheet/ 7/7