Column Layout Snippets

Print Friendly and PDF Follow

Column Layout Snippets can be used to create "tableless" layouts. If possible, you should use a mobile ready content block. The snippets are useful in Event activity or category instructions/descriptions.

To utilize a snippet, you need to copy/paste the HTML below.

50/50 Split

50_50_split.png

<div class="snippetrow">
  <div class="split50left">
    Your content goes here. This is the left column.
  </div>
  <div class="split50right">
    Your content goes here. This is the right column.
  </div>
</div>

60/40 Split

60_40_split.png

<div class="snippetrow">
  <div class="split60left">
    Your content goes here. This is the left column.
  </div>
  <div class="split40right">
    Your content goes here. This is the right column.
  </div>
</div>


40/60 Split

40_60_split.png

<div class="snippetrow">
  <div class="split40left">
    Your content goes here. This is the left column.
  </div>
  <div class="split60right">
    Your content goes here. This is the right column.
  </div>
</div>


70/30 Split

70_30_split.png

<div class="snippetrow">
  <div class="split70left">
    Your content goes here. This is the left column.
  </div>
  <div class="split30right">
    Your content goes here. This is the right column.
  </div>
</div>


30/70 Split

30_70_split.png

<div class="snippetrow">
  <div class="split30left">
    Your content goes here. This is the left column.
  </div>
  <div class="split70right">
    Your content goes here. This is the right column.
  </div>
</div>


80/20 Split

80_20_split.png

<div class="snippetrow">
  <div class="split80left">
    Your content goes here. This is the left column.
  </div>
  <div class="split20right">
    Your content goes here. This is the right column.
  </div>
</div>


20/80 Split

20_80_Split.png

<div class="snippetrow">
  <div class="split20left">
    Your content goes here. This is the left column.
  </div>
  <div class="split80right">
    Your content goes here. This is the right column.
  </div>
</div>


3 Column Split

3_column_split.png

<div class="snippetrow">
  <div class="split33left">
    Your content goes here. This is the left column.
  </div>
  <div class="split33middle">
    Your content goes here. This is the middle column.
  </div>
  <div class="split33right">
    Your content goes here. This is the right column.
  </div>
</div>

4 Column Split

4_column_split.png

<div class="snippetrow">
  <div class="split25colA">
    Your content goes here. This is the left column (A).
  </div>
  <div class="split25colB">
    Your content goes here. This is the second from the left column (B).
  </div>
  <div class="split25colC">
    Your content goes here. This is the third from the left column (C).
  </div>
  <div class="split25colD">
    Your content goes here. This is the far right column (D).
  </div>
</div>

5 Column Split

5_column_split.png

<div class="snippetrow">
<div class="split20colA"> Your content goes here. This is the left column (A). </div> <div class="split20colB"> Your content goes here. This is the second from the left column (B). </div> <div class="split20colC"> Your content goes here. This is the third from the left column (C). </div> <div class="split20colD"> Your content goes here. This is the fourth from the left column (D). </div>
<div class="split20colE"> Your content goes here. This is the far right column (E). </div> </div>

6 Column Split

6_column_split.png


<div class="snippetrow">
  <div class="split16colA">
    Your content goes here. This is the left column (A).
  </div>
  <div class="split16colB">
    Your content goes here. This is the second from the left column (B).
  </div>
  <div class="split16colC">
    Your content goes here. This is the third from the left column (C).
  </div>
  <div class="split16colD">
    Your content goes here. This is the fourth from the left column (D).
  </div>
  <div class="split16colE">
    Your content goes here. This is the fifth from the left column (E).
  </div>
  <div class="split16colF">
    Your content goes here. This is the far right column (F).
  </div>
</div>

Adding CSS Padding

Do you want to add some spacing above and below your content? Easy just wrap your content in a div tag and then add one of the following classes to it. Your HTML should look something like the following.
<div class="paddingtop50">Your content</div>

The following classes will add spacing inside your "div" tag, either to the top or bottom. If you would like to add padding to the top and bottom at the same time, just separate the classes with a single space. Your HTML should look something like the following.
<div class="paddingtop50 paddingbottom50">Your content</div>

Classes

Top Bottom Left Right
paddingtop10
paddingtop20
paddingtop30
paddingtop40
paddingtop50
paddingbottom10
paddingbottom20
paddingbottom30
paddingbottom40
paddingbottom50
paddingleft10
paddingleft20
paddingleft30
paddingleft40
paddingleft50
paddingright10
paddingright20
paddingright30
paddingright40
paddingright50

 

Have more questions? Submit a request