Layout Methods for Side by Side Content

For the purposes of this page, the parent element is a container, and the child elements are what will become the side by side content.

<section class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</section>

Flexbox

Flexbox is the preferred method for laying out most side by side content because that's specifically what it's designed to do. It's also the newest of these methods. Browser support is very good and you shouldn't be afraid to use it, but if maximum compatibility is required, you'll need a fallback method as well.

  1. Set the parent element to display: flex
  2. Also on the parent, set the following values as necessary:
    • flex-flow (default is row nowrap)
    • justify-content (default is flex-start)
    • align-items (default is stretch)
  3. Set values on the child elements for flex-grow, flex-shrink, and flex-basis. Use the the flex shorthand property to set all three at the same time. The defaults are flex: 0 1 auto.

Floats

  1. Set the child elements to float: left
  2. Make sure the parent element clears them:
    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }
    
    or
    .parent {
        overflow: auto;
    }
    
  3. If using this method to create columns, margins may need to be adjusted to prevent wrapping.

Inline-Block

  1. Set the child elements to display: inline-block
  2. If using this method to create columns, all columns need a width setting. Use percentages and/or calc().
  3. Set box-sizing: border-box if necessary, to make sure the widths of the child elements fit within the parent element (including their padding and borders).
  4. White space between the child elements will not be totally ignored. Make adjustments in the code if necessary.

CSS Tables

  1. Set the parent element to display: table and table-layout: fixed for better predictability
  2. Set the child elements to display: table-cell
  3. Set widths on the child elements as needed. Leave at least one element without an explicit width so that it can flex to the remaining space within the parent.