-
Notifications
You must be signed in to change notification settings - Fork 0
Recipes
jupiterwise edited this page Apr 29, 2012
·
1 revision
Here are a couple of styling examples.
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-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;
}