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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.

            
              <!-- Flexbox takes care of this pretty easily, but for an IE 8, 9 solution, this is a good approach... I think -->
<header><div class="content"><h1>The Beatles!</h1></div></header>

<div class="col_wrapper">
  <div class="col" id="col_1">
  <h2>Beatle Facts</h2>
  The Beatles were an English rock band that formed in Liverpool, in 1960. With John Lennon, Paul McCartney, George Harrison and Ringo Starr, they became widely regarded as the greatest and most influential act of the rock era. Rooted in skiffle, beat and 1950s rock and roll, the Beatles later experimented with several genres, ranging from pop ballads to psychedelic and hard rock, often incorporating classical elements in innovative ways.
  </div>
  <div class="col" id="col_2">
  <h2>Beatle Facts</h2>
  From 1960, the Beatles built their reputation playing clubs in Liverpool and Hamburg over a three-year period. Manager Brian Epstein moulded them into a professional act and producer George Martin enhanced their musical potential.
  </div>
  <div class="col" id="col_3">
  <h2>Beatle Facts</h2>
  According to the RIAA, the Beatles are the best-selling band in the United States, with 177 million certified units.
  </div>
</div>
<div class="clear_both"></div>
<footer><div class="content">2014 Wikipedia</div></footer>
            
          
!
            
              * {margin:0;padding:0;  }
body {background-color: #fff; color:#fff;font-family:arial;}
.col_wrapper {
	width:100%;
	max-width:1000px;
	margin:0 auto;
	text-align:center;
}
.col {
	width:25%; 
	background-color:#a64b00;
	margin:1%;
	float:left;
	padding:3%;
	text-align:left;
}
header,footer {
	width:100%;
	margin:0 auto 1% auto;
	padding:1%;
	background-color:#a64b00;
	-webkit-box-sizing: border-box;  
 	-moz-box-sizing: border-box;  
  	box-sizing: border-box; 
	color:#fff;
}
.content {width:100%;max-width:1000px;margin:0 auto;}
.clear_both {clear:both;}
@media only screen and (max-width: 600px) {
.col {width:90%; float:none;margin:1% auto;}
}
            
          
!
            
              $(document).ready(function() {
  function HeightEqual(CLASS)
    {
  		$(CLASS).height('inherit');
  		var max_h = 0;
  		$(CLASS).each(function(i, obj) { // look for tallest obj 
		  var h = $(obj).height(); // get height of current obj
    	  if(h >= max_h)
	 	    {max_h = h;}
    	});
  		$(CLASS).height(max_h);
	  }

  HeightEqual('.col');
  $(window).resize(function(){
    HeightEqual('.col');
    });
});
            
          
!
999px
Loading ..................

Console