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


Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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


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.


                <div class="wrapper">
  <div class="content">
    <h1>Aligning position:fixed elements with CSS calc</h1>
    <p>When I scroll down the page, this bubble floats down the page with me <em>and</em> also stays within the auto centered wrapper thanks to <code>calc</code></p>
    <p>Check out <a href="">this blog post</a> for a full explanation of this magic.</p>
    <p>Not if I weaken first. Then maybe you should consider this: if anything happens to them, Starfleet is going to want a full investigation. When has justice ever been as simple as a rule book? I'm afraid I still don't understand, sir. This is not about revenge. This is about justice. We could cause a diplomatic crisis.</p>
    <p>Take the ship into the Neutral Zone Maybe we better talk out here; the observation lounge has turned into a swamp. Now, how the hell do we defeat an enemy that knows us better than we know ourselves? Your head is not an artifact! That might've been one of the shortest assignments in the history of Starfleet. A surprise party? Mr. Worf, I hate surprise parties. I would *never* do that to you.</p>
    <p>I am your worst nightmare! About four years. I got tired of hearing how young I looked. But the probability of making a six is no greater than that of rolling a seven. You bet I'm agitated! I may be surrounded by insanity, but I am not insane. I think you've let your personal feelings cloud your judgement. Your shields were failing, sir. You're going to be an interesting companion, Mr. Data. Why don't we just give everybody a promotion and call it a night - 'Commander'? Earl Grey tea, watercress sandwiches... and Bularian canapés? Are you up for promotion?</p> 
    <p>Fate protects fools, little children and ships named Enterprise. Sure. You'd be surprised how far a hug goes with Geordi, or Worf. Shields up! Rrrrred alert! The look in your eyes, I recognize it. You used to have it for me. Sorry, Data. I recommend you don't fire until you're within 40,000 kilometers. Mr. Worf, you do remember how to fire phasers? They were just sucked into space. Some days you get the bear, and some days the bear gets you. We have a saboteur aboard. My oath is between Captain Kargan and myself.</p> 
    <p>Your only concern is with how you obey my orders. Or do you prefer the rank of prisoner to that of lieutenant? Talk about going nowhere fast. Smooth as an android's bottom, eh, Data? Flair is what marks the difference between artistry and mere competence. Wait a minute - you've been declared dead. You can't give orders around here. Besides, you look good in a dress. I suggest you drop it, Mr. Data. The unexpected is our normal routine. Wouldn't that bring about chaos?</p>
  <div class="bubble">
    <code>calc is the best, y'all</code>


                .wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px;

.content {
  padding-right: 210px;

.bubble {
  position: fixed;
  top: 20px;
  right: calc(50% - 450px + 30px);

@media all and (max-width: 900px){
  .bubble {
    right: 20px;

/* just some pretty stuff below here */
* {
  box-sizing: border-box;

body {
  background: #ecf0f1;

h1 {
  font-size: 50px;

p {
  font-size: 25px;
  line-height: 1.4;

a {
  color: #128b98;
  text-decoration: none;

a:hover {
  border-bottom: solid 1px #128b98;

.wrapper {
  background: #fff;

.bubble {
  width: 180px;
  height: 180px;
  background: #128b98;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  padding: 50px 30px;
  font-size: 20px;