css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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

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

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <h1>More flexible positioned Regions</h1>

<p>Each of the 4 regions (marked with a 1px red border) below has been positioned using CSS attributes and techhniques.</p>

<p>This time we are using relative positioning to gain more flexibility. </p>

<div class="region" id='region1'></div>

<div class="region" id='region2'></div>

<div class="region" id='region3'></div>

<div class="region" id='region4'></div>

<div id="source"><p>terminal gravity copper berliner weisse all-malt saccharification? finishing hops bottle conditioning alcohol dry hopping cask conditioned ale sparge oxidized kolsch berliner weisse. mash abbey original gravity adjunct hefe trappist. lauter tun; dry hopping, imperial cask bacterial: ale keg mead malt. barleywine carboy wort cold filter.</p>

  <p>acid rest anaerobic sour/acidic. hops mash ipa biere de garde. all-malt conditioning hop back final gravity cask. length mead dunkle tulip glass bacterial dextrin; bitter! krug carbonation, aau ibu reinheitsgebot bitter. mash tun crystal malt cask conditioned ale tulip glass units of bitterness? seidel lauter tun pitching additive carbonation mash reinheitsgebot units of bitterness. brewhouse barrel autolysis krug pint glass hop back heat exchanger?</p>

  <p>fermentation alcohol brew real ale; hand pump hefe. amber attenuation attenuation hydrometer hard cider. scotch ale alcohol double bock/dopplebock dunkle hop back keg lager. aroma hops draft (draught); lauter tun dunkle racking bright beer? top-fermenting yeast, shelf life oxidized barley. crystal malt cask conditioned ale, dextrin adjunct lambic; hops.</p>

  <p>hoppy bock berliner weisse pilsner. bottle conditioning adjunct, goblet beer abv alpha acid becher ale ibu pub keg autolysis fermentation.</p>

  <p>Aau malt extract alpha acid autolysis hefe dry hopping. dextrin hydrometer dry hopping wort chiller microbrewery aroma hops. pint glass. brewing, specific gravity bottom fermenting yeast; bittering hops hops amber, wort chiller. becher all-malt secondary fermentation, primary fermentation. wheat beer glass aau pub. lager malt extract caramel malt dunkle carboy; malt adjunct alpha acid.</p>

  <p>brewhouse terminal gravity original gravity hydrometer. shelf life dextrin, bunghole wort chiller lauter top-fermenting yeast ester. chocolate malt microbrewery hard cider cask conditioning hop back barleywine dry stout. conditioning tank double bock/dopplebock top-fermenting yeast pint glass, bunghole, final gravity mouthfeel, lambic, abv keg. conditioning kolsch real ale imperial, seidel attenuation. bright beer rims hard cider becher alcohol? reinheitsgebot units of bitterness goblet hard cider oxidized! bung autolysis bock draft (draught) tulip glass: gravity crystal malt priming alpha acid barley wort chiller. rims bunghole double bock/dopplebock hops hops enzymes wort chiller.</p>

  <p>barrel cask conditioned ale secondary fermentation cask conditioning. yeast bittering hops ester units of bitterness bitter; hops oxidized. brew copper enzymes. draft (draught) pitching crystal malt draft (draught) acid rest alcohol goblet grainy.</p>

  <p>lagering, carbonation trappist chocolate malt priming mash tun, bottle conditioning cold filter. bung brewing, additive; conditioning adjunct infusion hops balthazar, fermentation racking, final gravity. heat exchanger oxidized krausen barrel pilsner. primary fermentation sour/acidic microbrewery, aroma hops. cask conditioning specific gravity abbey bottom fermenting yeast racking, beer bottom fermenting yeast attenuation. lambic, alpha acid oxidized heat exchanger bittering hops aau enzymes hop back. dextrin seidel krausen balthazar malt extract bung mouthfeel krug caramel malt.</p>

  <p>wheat beer glass degrees plato bright beer. racking aerobic barley bittering hops, filter malt extract black malt reinheitsgebot krausen! seidel racking, " lambic; mash dunkle anaerobic aroma hops!"</p>
<p>terminal gravity copper berliner weisse all-malt saccharification? finishing hops bottle conditioning alcohol dry hopping cask conditioned ale sparge oxidized kolsch berliner weisse. mash abbey original gravity adjunct hefe trappist. lauter tun; dry hopping, imperial cask bacterial: ale keg mead malt. barleywine carboy wort cold filter.</p>

  <p>acid rest anaerobic sour/acidic. hops mash ipa biere de garde. all-malt conditioning hop back final gravity cask. length mead dunkle tulip glass bacterial dextrin; bitter! krug carbonation, aau ibu reinheitsgebot bitter. mash tun crystal malt cask conditioned ale tulip glass units of bitterness? seidel lauter tun pitching additive carbonation mash reinheitsgebot units of bitterness. brewhouse barrel autolysis krug pint glass hop back heat exchanger?</p>

  <p>fermentation alcohol brew real ale; hand pump hefe. amber attenuation attenuation hydrometer hard cider. scotch ale alcohol double bock/dopplebock dunkle hop back keg lager. aroma hops draft (draught); lauter tun dunkle racking bright beer? top-fermenting yeast, shelf life oxidized barley. crystal malt cask conditioned ale, dextrin adjunct lambic; hops.</p>

  <p>hoppy bock berliner weisse pilsner. bottle conditioning adjunct, goblet beer abv alpha acid becher ale ibu pub keg autolysis fermentation.</p>

  <p>Aau malt extract alpha acid autolysis hefe dry hopping. dextrin hydrometer dry hopping wort chiller microbrewery aroma hops. pint glass. brewing, specific gravity bottom fermenting yeast; bittering hops hops amber, wort chiller. becher all-malt secondary fermentation, primary fermentation. wheat beer glass aau pub. lager malt extract caramel malt dunkle carboy; malt adjunct alpha acid.</p>

  <p>brewhouse terminal gravity original gravity hydrometer. shelf life dextrin, bunghole wort chiller lauter top-fermenting yeast ester. chocolate malt microbrewery hard cider cask conditioning hop back barleywine dry stout. conditioning tank double bock/dopplebock top-fermenting yeast pint glass, bunghole, final gravity mouthfeel, lambic, abv keg. conditioning kolsch real ale imperial, seidel attenuation. bright beer rims hard cider becher alcohol? reinheitsgebot units of bitterness goblet hard cider oxidized! bung autolysis bock draft (draught) tulip glass: gravity crystal malt priming alpha acid barley wort chiller. rims bunghole double bock/dopplebock hops hops enzymes wort chiller.</p>

  <p>barrel cask conditioned ale secondary fermentation cask conditioning. yeast bittering hops ester units of bitterness bitter; hops oxidized. brew copper enzymes. draft (draught) pitching crystal malt draft (draught) acid rest alcohol goblet grainy.</p>

  <p>lagering, carbonation trappist chocolate malt priming mash tun, bottle conditioning cold filter. bung brewing, additive; conditioning adjunct infusion hops balthazar, fermentation racking, final gravity. heat exchanger oxidized krausen barrel pilsner. primary fermentation sour/acidic microbrewery, aroma hops. cask conditioning specific gravity abbey bottom fermenting yeast racking, beer bottom fermenting yeast attenuation. lambic, alpha acid oxidized heat exchanger bittering hops aau enzymes hop back. dextrin seidel krausen balthazar malt extract bung mouthfeel krug caramel malt.</p>

  <p>wheat beer glass degrees plato bright beer. racking aerobic barley bittering hops, filter malt extract black malt reinheitsgebot krausen! seidel racking, " lambic; mash dunkle anaerobic aroma hops!"</p>
<p>terminal gravity copper berliner weisse all-malt saccharification? finishing hops bottle conditioning alcohol dry hopping cask conditioned ale sparge oxidized kolsch berliner weisse. mash abbey original gravity adjunct hefe trappist. lauter tun; dry hopping, imperial cask bacterial: ale keg mead malt. barleywine carboy wort cold filter.</p>

  <p>acid rest anaerobic sour/acidic. hops mash ipa biere de garde. all-malt conditioning hop back final gravity cask. length mead dunkle tulip glass bacterial dextrin; bitter! krug carbonation, aau ibu reinheitsgebot bitter. mash tun crystal malt cask conditioned ale tulip glass units of bitterness? seidel lauter tun pitching additive carbonation mash reinheitsgebot units of bitterness. brewhouse barrel autolysis krug pint glass hop back heat exchanger?</p>

  <p>fermentation alcohol brew real ale; hand pump hefe. amber attenuation attenuation hydrometer hard cider. scotch ale alcohol double bock/dopplebock dunkle hop back keg lager. aroma hops draft (draught); lauter tun dunkle racking bright beer? top-fermenting yeast, shelf life oxidized barley. crystal malt cask conditioned ale, dextrin adjunct lambic; hops.</p>

  <p>hoppy bock berliner weisse pilsner. bottle conditioning adjunct, goblet beer abv alpha acid becher ale ibu pub keg autolysis fermentation.</p>

  <p>Aau malt extract alpha acid autolysis hefe dry hopping. dextrin hydrometer dry hopping wort chiller microbrewery aroma hops. pint glass. brewing, specific gravity bottom fermenting yeast; bittering hops hops amber, wort chiller. becher all-malt secondary fermentation, primary fermentation. wheat beer glass aau pub. lager malt extract caramel malt dunkle carboy; malt adjunct alpha acid.</p>

  <p>brewhouse terminal gravity original gravity hydrometer. shelf life dextrin, bunghole wort chiller lauter top-fermenting yeast ester. chocolate malt microbrewery hard cider cask conditioning hop back barleywine dry stout. conditioning tank double bock/dopplebock top-fermenting yeast pint glass, bunghole, final gravity mouthfeel, lambic, abv keg. conditioning kolsch real ale imperial, seidel attenuation. bright beer rims hard cider becher alcohol? reinheitsgebot units of bitterness goblet hard cider oxidized! bung autolysis bock draft (draught) tulip glass: gravity crystal malt priming alpha acid barley wort chiller. rims bunghole double bock/dopplebock hops hops enzymes wort chiller.</p>

  <p>barrel cask conditioned ale secondary fermentation cask conditioning. yeast bittering hops ester units of bitterness bitter; hops oxidized. brew copper enzymes. draft (draught) pitching crystal malt draft (draught) acid rest alcohol goblet grainy.</p>

  <p>lagering, carbonation trappist chocolate malt priming mash tun, bottle conditioning cold filter. bung brewing, additive; conditioning adjunct infusion hops balthazar, fermentation racking, final gravity. heat exchanger oxidized krausen barrel pilsner. primary fermentation sour/acidic microbrewery, aroma hops. cask conditioning specific gravity abbey bottom fermenting yeast racking, beer bottom fermenting yeast attenuation. lambic, alpha acid oxidized heat exchanger bittering hops aau enzymes hop back. dextrin seidel krausen balthazar malt extract bung mouthfeel krug caramel malt.</p>

  <p>wheat beer glass degrees plato bright beer. racking aerobic barley bittering hops, filter malt extract black malt reinheitsgebot krausen! seidel racking, " lambic; mash dunkle anaerobic aroma hops!"</p>
</div>
            
          
!
            
              html, body {
  width: 100%;
  
}

#source {
	-webkit-flow-into: main-content;
	-ms-flow-into: main-content;
  flow-into: main-content;
}


.region {
	-webkit-flow-from: main-content;
	-ms-flow-from: main-content;
  flow-from: main-content;
  position:relative;
  width: 300px;
	height: 400px;
  border: 1px solid red;
}

#region1, #region3 {
	left: 10px;
}

#region2, #region4 {
  left: 320px;
}

            
          
!
999px
🕑 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 ..................

Console