Old and new, living together.
A Pen by Chris Coyier on CodePen.
<div class="page-wrap"> | |
<section class="main-content"> | |
<h1>Main Content</h1> | |
<p><strong>I'm first in the source order.</strong></p> | |
<p>The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep. Fry, we have a crate to deliver. Hey, guess what you're accessories to.</p> | |
<p>I'll get my kit! That's not soon enough! Oh, all right, I am. But if anything happens to me, tell them I died robbing some old man.</p> | |
</section> | |
<nav class="main-nav"> | |
<h2>Nav</h2> | |
<ul> | |
<li><a href="#">Home</a></li> | |
<li><a href="#">About</a></li> | |
<li><a href="#">Clients</a></li> | |
<li><a href="#">Contact Us</a></li> | |
</ul> | |
</nav> | |
<aside class="main-sidebar"> | |
<h2>Sidebar</h2> | |
<p>I am a rather effortless column of equal height.</p> | |
</aside> | |
</div> |
Old and new, living together.
A Pen by Chris Coyier on CodePen.
/* | |
Browser support | |
Chrome any | |
Firefox any | |
Safari any | |
Opera 12.1+ | |
IE 10+ | |
iOS any | |
Android any | |
*/ |
.page-wrap { | |
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ | |
display: -moz-box; /* OLD - Firefox 19- (doesn't work very well) */ | |
display: -ms-flexbox; /* TWEENER - IE 10 */ | |
display: -webkit-flex; /* NEW - Chrome */ | |
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ | |
} | |
.main-content { | |
-webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */ | |
-moz-box-ordinal-group: 2; /* OLD - Firefox 19- */ | |
-ms-flex-order: 2; /* TWEENER - IE 10 */ | |
-webkit-order: 2; /* NEW - Chrome */ | |
order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */ | |
width: 60%; /* No flex here, other cols take up remaining space */ | |
-moz-box-flex: 1; /* Without this, Firefox 19- expands to widest paragraph, overrides width */ | |
background: white; | |
} | |
.main-nav { | |
-webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */ | |
-moz-box-ordinal-group: 1; /* OLD - Firefox 19- */ | |
-ms-flex-order: 1; /* TWEENER - IE 10 */ | |
-webkit-order: 1; /* NEW - Chrome */ | |
order: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ | |
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ | |
-moz-box-flex: 1; /* OLD - Firefox 19- */ | |
width: 20%; /* For old syntax, otherwise collapses. */ | |
-webkit-flex: 1; /* Chrome */ | |
-ms-flex: 1; /* IE 10 */ | |
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ | |
background: #ccc; | |
} | |
.main-sidebar { | |
-webkit-box-ordinal-group: 3; /* OLD - iOS 6-, Safari 3.1-6 */ | |
-moz-box-ordinal-group: 3; /* OLD - Firefox 19- */ | |
-ms-flex-order: 3; /* TWEENER - IE 10 */ | |
-webkit-order: 3; /* NEW - Chrome */ | |
order: 3; /* NEW, Spec - Opera 12.1, Firefox 20+ */ | |
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ | |
-moz-box-flex: 1; /* Firefox 19- */ | |
width: 20%; /* For OLD syntax, otherwise collapses. */ | |
-ms-flex: 1; /* TWEENER - IE 10 */ | |
-webkit-flex: 1; /* NEW - Chrome */ | |
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ | |
background: #ccc; | |
} | |
.main-content, | |
.main-sidebar, | |
.main-nav { | |
padding: 1em; | |
} | |
body { | |
padding: 2em; | |
background: #79a693; | |
} | |
* { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
h1, h2 { | |
font: bold 2em Sans-Serif; | |
margin: 0 0 1em 0; | |
} | |
h2 { | |
font-size: 1.5em; | |
} | |
p { | |
margin: 0 0 1em 0; | |
} |