Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Recipes

jupiterwise edited this page · 1 revision
Clone this wiki locally

Here are a couple of styling examples.

Quick & Dirty

This is a two-column using only inline styles.

[column style="background:#00f;color:#fff;float:left;margin-right:2%;padding:1%;width:46%;"]

This column has a very lovely blue background.

[/column]

[column style="background:#f00;color:#fff;float:left;margin-left:2%;padding:1%;width:46%;"]

This column is quite red. Quite.

[/column][endrow]

Three-fingered Jack

Three-column layout that uses the H5BP clearfix on the row div, and achieves equal height across the columns using the One True Layout Method as discussed on CSS-Tricks.

.diy-row {
  margin-bottom: 20px;
  overflow: hidden;
  width: 100%;
  *zoom: 1;
}
.diy-row:before, .diy-row:after {
  content: "";
  display: table;
}
.diy-row:after {
  clear: both;
}
.diy-column {
  border-left: 10px solid #000;
  border-right: 10px solid #000;
  display: inline;
  float: left;
  height: 100%;
  padding: 10px;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
  width: 200px;
}
.diy-column-1 {
  border-left: 0;
}
.diy-column-3 {
  border-right: 0;
}
Something went wrong with that request. Please try again.