2 Equal-Width Columns

2-Equal-Width-Columns.markdown

2 Equal-Width Columns

Content that becomes two equal columns when space allows.

A Pen by Brad Frost on CodePen.

License.

index.html

<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">&larr;More Responsive Patterns</a>
				</nav>
			</div>
		</footer>
	</div>

style.css

.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%;
  }
}