// Layout
// ==========================================================================

// GOV.UK front end toolkit dependencies
@import "measurements";
@import "conditionals";
@import "grid_layout";
@import "helpers";
@import "design-patterns/alpha-beta";


// Page container
// ==========================================================================

// Page container wraps the entire site content block
#page-container {
  @include site-width-container;
  padding-bottom: $gutter;
  @include media(desktop) {
    padding-bottom: $gutter*3;
  }
}


// Phase banner
// ==========================================================================

.phase-banner  {
  @include phase-banner(alpha);
}


// Grid layout
// ==========================================================================

// Usage:
// For two equal columns

// <div class="grid-row">
//   <div class="column-half">
//
//   </div>
//   <div class="column-half">
//
//   </div>
// </div>

// Use .grid-row to define a row for grid columns to sit in
.grid-row {
  @include grid-row;
}

// Use .grid-column to create a grid column with 15px gutter
// By default grid columns break to become full width at tablet size
.column-quarter {
  @include grid-column( 1/4 );
}
.column-half {
  @include grid-column( 1/2 );
}
.column-third {
  @include grid-column( 1/3 );
}
.column-two-thirds {
  @include grid-column( 2/3 );
}

// Layout
// ==========================================================================

// GOV.UK front end toolkit dependencies
@import "measurements";
@import "conditionals";
@import "grid_layout";
@import "helpers";
@import "design-patterns/alpha-beta";


// Page container
// ==========================================================================

// Page container wraps the entire site content block
#page-container {
  @include site-width-container;
  @include contain-floats;
  padding-bottom: $gutter;
  @include media(desktop) {
    padding-bottom: $gutter*3;
  }
}


// Phase banner
// ==========================================================================

.phase-banner  {
  @include phase-banner(alpha);
}


// Grid layout
// ==========================================================================

// Usage:
// For two equal columns

// <div class="grid-row">
//   <div class="column-half">
//
//   </div>
//   <div class="column-half">
//
//   </div>
// </div>

// Use .grid-row to define a row for grid columns to sit in
.grid-row {
  @include grid-row;
}

// Use .grid-column to create a grid column with 15px gutter
// By default grid columns break to become full width at tablet size
.column-quarter {
  @include grid-column( 1/4 );
}
.column-half {
  @include grid-column( 1/2 );
}
.column-third {
  @include grid-column( 1/3 );
}
.column-two-thirds {
  @include grid-column( 2/3 );
}

Use contain floats mixin for page container
Use contain floats mixin for page container

For pages with floated content, the footer wasn’t cleared.
Using the contain-floats mixin fixes this.
