Skip to content

Instantly share code, notes, and snippets.

@mike-zarandona

mike-zarandona/Inline-Block Columns

Created August 28, 2014 15:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mike-zarandona/c1c3a288b87648b52b73 to your computer and use it in GitHub Desktop.
Save mike-zarandona/c1c3a288b87648b52b73 to your computer and use it in GitHub Desktop.
Download ZIP
Pretty un-floated columns.
Raw
Inline-Block Columns
// columns
[class*="col-"] {
display: inline-block;
margin: 0 4% 0 -4px;
.box-sizing;
vertical-align: top;
&[class*="-left"] {
width: 68%;
text-align: center;
}
&[class*="-right"] {
width: 23%;
text-align: left;
}
// spacing
&:first-of-type { margin-left: 0; }
&:last-of-type { margin-right: 0; }
}
/*
|-----------------------------
| Usage
|-----------------------------
|
| <div class="col-left">
| ...
| </div>
|
| <div class="col-right">
| ...
| </div>
|
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment