sections + columns = boxes

This is a .pad-y-l section inside a div.fullbox.intro as a page header. .intro makes it creep under the nav bar when it is placed right after the <header>. So .intro only works here, don‘t worry if you leave it in when you move sections around later.

Section with Background

This would be a section.pad-y-xl.row-apart (wrapped in a div.fullbox which carries the background-image). This column here is deliberately smaller than it could be.

Wrapped columns

left column inside .colwrap

dummy image

left column

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.

dummy image

left column

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.

both wrapper and columns are .co-4

dummy image

center column

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.

dummy image

center column

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod dolore magna aliqua.

centered by section.row-center

dummy image

right column

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.

dummy image

right column

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do.

Two columns in a box

Two 1/3-columns in a 2/3 .box-wrapper box.

Here the <section> has .pad-t-m — padding on top, but none at the bottom – to position the box flush with the bottom of the container .fullbox

<div class="fullbox">
  <section class="pad-t-m row-center">
    <div class="box-wrapper tw2-3">
      <div class="co-3"> </div>
      <div class="co-3"> </div>
    </div>
  </section>
</div>

Two smaller columns in a smaller box

Two 1/4-columns in a 2/4 container. Please note: the widths of columns and box-wrapper containers have to match. Here we use tw2-4 in combo with co-4/co-2, whereas the larger uses tw2-3 and co-3/co-23

<div class="fullbox">
  <section class="pad-y-m row-right">
    <div class="box-wrapper tw2-4">
      <div class="co-4"> </div>
      <div class="co-4"> </div>
    </div>
  </section>
</div>

flush alignment

The right-aligned box before stays within the margins of its section. To reach the very edge of the viewport .flush is added to the box-wrapper. The section‘s row-left or row-right tells the box which side we mean.

<div class="fullbox">
  <section class="pad-b-m row-left">
    <div class="box-wrapper tw2-4 flush">
      <div class="co-2"> </div>
    </div>
  </section>
</div>

You can indeed put something beside/outside the wrapper box, but you have to keep in mind that a) only in theory there would be enough space for a .co-2 width, but the gap between the two is already occupied, and b) this column here expects the section to take care of the padding above it, but not here. Luckily the pad-t-s can be applied to columns as well, so it can have its own.

center center

<div class="fullbox" style="bg-color…">
  <section class="pad-y-m row-center">
    <div class="box-wrapper tw2-4 card-shadow">
      <div class="co-2"> </div>
    </div>
  </section>
</div>

Disclaimer: Everything here is free to use, but no responsibility is taken for any outcome. Questions & Suggestions: ak at alexkoch dot net (you‘re not a robot, I know). And I don‘t use cookies. Version history