Set widths as a share and line them up

01 / 05

Line up the same shape several times

The cards in a list are the same shape with different contents. So the HTML repeats the same shape, and the CSS only needs one class worth.

Whether you line up two or ten, one rule of CSS covers it.

<div class="card">  <h3>Paper folding class</h3></div><div class="card">  <h3>An evening of star stories</h3></div>

02 / 05

The trouble with setting a width in px

Lining up across is the float you know. This time you want them packed from the left, so use float: left;.

The trouble is the width. Pin the number down with something like width: 200px; and the moment you change the container width it falls apart. If the container is only 500px, three of them come to 600px, so the third overflows and drops below.

.card {  float: left;  width: 200px;}

03 / 05

A share grows to fit the container

Use % and it means "what share of the parent width". Wide parent, wide card; narrow parent, narrow card.

width: 50%; is half. With a parent of 600px that is 300px; with 800px it is 400px.

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

04 / 05

When it will not divide, take a little off

The share for three across is 33.33…%, which you cannot write out. So make it a slightly smaller 33%.

At 99% in total you are only 1% short, and nothing overflows and drops below. Short is the safe side.

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

05 / 05

You change the number in one place only

For four across, 25%; for five, 20%. You change one number, the share, and you never touch the HTML.

That is the strength of building by repeating the same shape. Have a go.