Two Column
HTML
<article class="cf"> <div class="fl w-50 bg-near-white tc"> <h1>Column One</h1> </div> <div class="fl w-50 bg-light-gray tc"> <h1>Column Two</h1> </div> </article>
css
.cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } .fl { float: left; _display: inline; } .w-50 { width: 50%; } .bg-light-gray { background-color: #eee; } .bg-near-white { background-color: #f4f4f4; } .tc { text-align: center; }
Css stats for this component
- Gzipped Size
- 201B
- Selectors
- 9
- Declarations
- 10
Modules referenced
Install via npm Only installs the needed tachyons-modules for this component
npm i --save tachyons-clears tachyons-floats tachyons-widths tachyons-skins tachyons-text-align