cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

              <div class="container">
    <h2>Simple flex 'holy grail' layout</h2>

  <article class="center">
    <h3>Back in the day...</h3>
    <p>It would have taken some serious CSS trickery to get the columns' height to match that of the center. This was called the 'holy grail' of layouts back in the late '90's, early 00's, and has been the bane of web developers for years.</p>
 <p>Flex makes this relatively easy to do, and a LOT more semantic. The drawback - browsers lower than IE10 get confused by flex, and aren't reliably showing what they should. So we have to use common sense in the use of Flex.</p>
  <p>Flex isn't perfect. And it's not always wise to use. It's risky to lay out an entire site like this, as you don't know what kind of browser is accessing your site. If your demographic is say, elderly, or those running work computers in governments, some corporate cultures (banks for example) or schools, you're going to watch it fall down and have temper tantrums in IE8.</p>
    <p>Look to the right for another way, young padawan. Or was that 'look to the light'...something like that.</p>
  <aside class="left">
    Look ma, short text!
  <aside class="right">
    <p>Another way to lay this out that's more reliable cross browser, and cross platform: </p>
    <p><a href="https://codepen.io/fay-lisa/pen/pEWWyE" target="_blank">Alt holy grail layout pen</a></p>
       Browser support for Flex: <a href="http://caniuse.com/#search=flexbox"  target="_blank">CanIUse.com</a>
       Known bugs + issues associated with Flex and workarounds: <a href="https://github.com/philipwalton/flexbugs" target="_blank">Philip Walton's GIT</a>
              /* simple flex layout  */

// setting up the containers that require it, to have flex. instead of using the codepen prefixer, I've included them here. though in production this shouldn't all be in the css, but brought in prefixer. 
.container, header, footer {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;

.container {
  min-height: 100vh; // this way the columns, header and footer automatically take up at least the height of the page. this prevents shorter content from cutting the page short and seeing the footer halfway up the height of the browser.
  // gives everything 10px padding
  & > * {
    padding: 10px;
  // give the elements a mobile first width. the order is set in the html for mobile first as well, and altered later.
  header, aside, article, footer {
    flex: 1 1 100%;
  // add styling for each section: 
  header, footer {
    justify-content: center;
    align-items: center; // look at this full screen from 'change view' above to the right, and this will vertically center the text. 
  // now we color just the elements
  header {
     background: #d8eaf6;
  .left {
    background: #90b9d2;

  .center {
    background: #c3dae6;
  .right {
    background: #68a3c2;
  footer {
    background: #2489b0;
  // now we change layout just slightly for larger than phone screens (ipad, ipad mini, larger phablets)
  @media all and (min-width: 600px) {
    aside {
      flex: 1 auto;
  // and re-arrange the flex elements for desktop (ipad is 768px so we guage this for larger-than this)
  @media all and (min-width: 769px) {
    .left {
      flex: 1; // tells it to share the row with .right
      order: 1; // sets the left column as 'first' in the row

    .center {
      flex: 3; // makes the center column 3 times the size of the other 2
      order: 2; // sets the center as just that

    .right {
      flex: 1;
      order: 3; // sets the right column as the third in the row
    footer {
      order: 5; // places the footer where it should be: last

// basic styling. 
body {
  font-family: Helvetica, Arial, sans-serif;
  background: aliceblue;
* {
  box-sizing: border-box;
//a tags 
a {
  color: #fcf58b;
h2, footer {
  text-align: center;
h3 {
  margin: 0 0 10px 0;
p {
  margin: 5px 0 20px;
ul {
  // getting rid of the browser default
  margin: 0;
  padding: 0;
  list-style-type: none;
  li {
    margin: 10px 5px;
    display: inline-block;
    padding: 5px;
    background: #196b8a;
    color: aliceblue;
    a { color: aliceblue; }
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................