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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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.

            
              <pre>
column-width: 30em;
column-gap: 2em;  
column-rule: 1px dotted #ddd;
</pre>

<div class="box">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales eros in nisl suscipit gravida. Quisque vitae dolor dolor. Aliquam arcu dui, pulvinar in risus vel, hendrerit egestas odio. Maecenas ut elit quis massa volutpat aliquam at ut lorem. Suspendisse eget condimentum dui, nec vulputate neque. Vestibulum a blandit quam. Integer lacinia vestibulum erat, non sollicitudin lorem vehicula blandit. Vivamus odio nisl, sollicitudin non blandit blandit, ullamcorper quis mi.

<p>Sed venenatis felis nec ex luctus lacinia. Sed nunc dui, pretium non lorem a, finibus feugiat sem. Donec lobortis orci pretium, bibendum enim et, lobortis urna. In molestie ligula vitae mi vestibulum, sed euismod enim vestibulum. In congue tincidunt quam, nec feugiat lorem tristique a. Curabitur egestas fringilla auctor. Aliquam iaculis elementum erat. Ut ut elit vel est finibus iaculis sed quis massa. Morbi non tincidunt neque. Vivamus ac ante at elit sodales aliquet et vel augue. Nam sodales blandit dapibus.

<p>Nunc egestas diam lorem, at mattis sem scelerisque id. Nullam bibendum felis maximus turpis fringilla mollis. Cras commodo luctus urna nec lobortis. Fusce id fermentum leo, nec sodales sapien. Phasellus vel massa id mi pretium mattis sit amet a ante. Duis massa nisi, sodales vitae posuere et, ornare eget augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In accumsan lacinia mauris nec volutpat. Donec turpis orci, efficitur in porta in, ultricies et dolor. Fusce aliquet nunc varius, facilisis nisi eget, vehicula magna. Phasellus quis tincidunt eros, eu ultricies urna. Aliquam luctus maximus elit tempus tincidunt. Etiam non elementum libero.

<p>Phasellus tristique at justo a dictum. Phasellus venenatis elit leo, ut consectetur sem tristique at. Phasellus mollis erat lobortis, aliquet nulla sed, molestie leo. Aenean eu rutrum dui. Nullam et eros pulvinar, imperdiet enim nec, venenatis nunc. Aliquam quis erat dui. Suspendisse vehicula ante augue, sed pretium magna consectetur vitae. Curabitur quis nibh massa. Vivamus viverra porttitor ante.

<p>Nullam venenatis ipsum eu nunc laoreet lacinia. Vivamus congue hendrerit dictum. Aenean auctor fringilla risus eget laoreet. Fusce imperdiet orci neque, congue commodo massa elementum non. Pellentesque commodo, velit vitae rhoncus laoreet, tortor diam volutpat lorem, eget tempus arcu nunc sed ex. Nam a condimentum est. Nulla facilisis lectus ut neque hendrerit tempus. Nunc neque dolor, imperdiet quis neque eu, tincidunt porta eros.
  
</div>

<p class="css-mine">
  <small>
  (<a href="http://www.cssmine.com/css3-multiple-columns" target="_blank">CSS3 Multiple Columns</a> at CSS Mine)
  </small>
</p> 
            
          
!
            
              .box {
  column-width: 30em;
  column-gap: 2em;  
  column-rule: 1px dotted #ddd;
} 

p {
  margin-top: 0;
}

.css-mine {
  margin-top: 2em;
  clear: both;
}

body {
  margin: 1.5em;
}
            
          
!
999px
Loading ..................

Console