Content that becomes two equal columns when space allows.
A Pen by Brad Frost on CodePen.
Content that becomes two equal columns when space allows.
A Pen by Brad Frost on CodePen.
<div id="pattern" class="pattern"> | |
<div class="col-group"> | |
<div> | |
<h2>Here's a column of text</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque turpis diam, tincidunt nec convallis vitae, dapibus vitae enim. Nam bibendum nisl in risus imperdiet vestibulum.</p> | |
</div> | |
<div> | |
<h2>Here's another column of text</h2> | |
<p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.</p> | |
</div> | |
</div> | |
</div> | |
<!--End Pattern HTML--> | |
<div class="container"> | |
<section class="pattern-description"> | |
<h1>2 Equal-Width Columns</h1> | |
<p>Content that becomes two equal columns when space allows.</p> | |
</section> | |
<footer role="contentinfo"> | |
<div> | |
<nav id="menu"> | |
<a href="http://bradfrost.github.com/this-is-responsive/patterns.html">←More Responsive Patterns</a> | |
</nav> | |
</div> | |
</footer> | |
</div> |
.col-group > div { | |
padding: 1em; | |
margin-bottom: 1em; | |
} | |
@media screen and (min-width: 44em) { | |
.col-group { | |
overflow: hidden; | |
} | |
.col-group > div { | |
float: left; | |
width: 50%; | |
} | |
} |