Clear up after the boxes you floated

01 / 05

A floated box floats free of its parent

float, as the name says, is the setting that floats a box. A floated box drops out of sight of the parent box, and stops being counted in the parent's height.

So when you line up cards, the background colour or border on the parent "collapses".

.card {  float: left;  width: 33%;}

02 / 05

Whatever follows wraps around it

The other awkward part is wrapping. If there is room beside a floated box, whatever you wrote after it slips into the gap.

The heading you put after the list perching to the right of the cards — that is this happening.

03 / 05

clear stops the wrapping

clear says "keep out of the way of anything floating and start below it". The value says which side to keep clear of.

left … keep clear of things floated left
right … keep clear of things floated right
both … keep clear of both

If in doubt, both. It is the surest.

.after {  clear: both;}

04 / 05

Clear up with an empty box

Put an empty box right under the cards and give it clear: both;, and from there down you are back in the normal flow. The parent height gets worked out properly again.

Nothing shows on screen, but it is the one line that puts the collapse right.

<div class="cards">  <div class="card">…</div>  <div class="clear"></div></div>

05 / 05

Make the gaps with padding at the sides

Make the gaps between cards with margin and the total width goes over 100% and overflows.

Instead, put padding inside the card and bring the contents inward. The total width does not change, so nothing falls apart. Have a go.