Pen Settings

HTML

CSS

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

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="page">
  <header class="box">header</header>
  
  <div class="layout">
    <main>
      <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Maecenas lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer in sapien. Aenean id metus id velit ullamcorper pulvinar. Morbi scelerisque luctus velit. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Nullam at arcu a est sollicitudin euismod. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris dictum facilisis augue. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Mauris tincidunt sem sed arcu. In enim a arcu imperdiet malesuada. Quisque porta.
      </p>
<p>
Integer vulputate sem a nibh rutrum consequat. Aenean id metus id velit ullamcorper pulvinar. Fusce aliquam vestibulum ipsum. Fusce nibh. Vivamus ac leo pretium faucibus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tellus. Duis condimentum augue id magna semper rutrum. Etiam neque. Pellentesque pretium lectus id turpis. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Etiam quis quam. Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Mauris metus.
</p>
<p>
Duis condimentum augue id magna semper rutrum. Duis pulvinar. Nulla quis diam. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Etiam quis quam. Donec iaculis gravida nulla. Etiam sapien elit, consequat eget, tristique non, venenatis quis, ante. Aenean vel massa quis mauris vehicula lacinia.
</p>
<p>
Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Nullam faucibus mi quis velit. Duis condimentum augue id magna semper rutrum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Fusce wisi. Nulla pulvinar eleifend sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque tincidunt scelerisque libero. Cras elementum. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu. Fusce consectetuer risus a nunc. Aliquam erat volutpat. Sed vel lectus. Donec odio tempus molestie, porttitor ut, iaculis quis, sem. Aliquam erat volutpat. Mauris elementum mauris vitae tortor. Vestibulum fermentum tortor id mi. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat.
</p>
<p>
Nullam faucibus mi quis velit. Aliquam erat volutpat. Duis risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Donec iaculis gravida nulla. Integer imperdiet lectus quis justo. Nullam feugiat, turpis at pulvinar vulputate, erat libero tristique tellus, nec bibendum odio risus sit amet ante. Cras elementum. Quisque tincidunt scelerisque libero. Phasellus rhoncus.
</p>
    </main>
    <aside class="box">aside</aside>
  </div>
  
  <footer class="box">footer</footer>
</div>
              
            
!

CSS

              
                /* jednoduchý reset */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* pár stylů aby to dobře vypadalo */
.box{
  padding: 20px;
  font-size: 30px;
}

.page{
  padding: 0 30px;
}

.layout{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* position: sticky magic */
header{
  margin-bottom: 30px;
  
  position: sticky;
  top: 0;
  z-index: 50;
  
  background: red;
  color: white;
}

main{
  width: 72%;
  padding: 20px;
  
  background: #f0f0f0;
}

aside{
  width: 25%;
  
  position: sticky;
  top: 90px;/*velikost hlavicky a mezera*/
  
  background: green;
  color: white;
}

footer{
  min-height: 1000px;
  margin-top: 30px;
  
  background: orange;
  color: white;
}
              
            
!

JS

              
                
              
            
!
999px

Console