testing 2 columns (css3)

when you use column-count that causes an overflow, test how that look.

by frumbert

HTML

<div id="example">
    <h1>Here's heading 1</h1>
      <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et.</p>
    <h1>Here's heading 2</h1>
<p> Nulla vitae magna sed sapien ultricies dapibus a non libero. Fusce lobortis adipiscing purus vel rhoncus.</p>
<h1>Here's heading 3</h1>
<p>Proin blandit, tortor quis tristique porta, nisl est rhoncus turpis, non interdum nibh ligula sit amet dolor.</p>
        <h1>Here's heading 4</h1>
  <p>Sed sagittis aliquam nulla vel viverra. Sed at 
      augue eros. Nam tincidunt mi eu malesuada molestie.</p>
        <h1>Here's heading 5</h1>
      <p>Nunc a vulputate turpis. Duis ornare lacus magna, vitae tincidunt leo elementum et.</p>
    <h1>Here's heading 6</h1>
<p> Nulla vitae magna sed sapien ultricies dapibus a non libero. Fusce lobortis adipiscing purus vel rhoncus.</p>

<h1>Here's heading 7</h1>
<p>Proin blandit, tortor quis tristique porta, nisl est rhoncus turpis, non interdum nibh ligula sit amet dolor.</p>
        <h1>Here's heading 8</h1>
  <p>Sed sagittis aliquam nulla vel viverra. Sed at 
      augue eros. Nam tincidunt mi eu malesuada molestie.</p>
</div>

CSS

#example {
    height: 300px;
    overflow: scroll;
    border: 1px solid red;
    
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 10px;
  -moz-column-gap: 10px;
  column-gap: 10px;
}