shanimal/jsbin.iSoxEKU.css

## jsbin.iSoxEKU.css
body {
  background-color:#444;
  font-family:helvetica, arial
}
.content {
	margin:0 auto;
	width:950px;
	background-color: #EEE;
	padding:0;
}
.footer {
	margin:0 auto;
	padding:0;
	width:950px;
	background-color:#222;
	color:#FFF;
	font-size:16px;
}
.footer div {
  padding:30px;
}
.header {
	margin:0px auto;
	padding:0px;
	width:950px;
	background-color:#F63;
	color:#FFF;
	font-size:16px;
}
.col {
	float:left;
	padding:10px;
}
.col.left {
	width:500px;
	float:left;
	outline:1px dashed blue;
	background-color:#FFc;
}
.col.right {
	width:400px;
	float:left;
	outline:1px dashed red;
	background-color:#FF9;
}
.component {
	width:100%;
}
/* drop zone */
.dropzone {
  min-height:267px;
}
.dropzone .droptarget {
	background-color:#F63;
	color:#FFF;
    border-radius:10px;
    height:150px;
}
.dropzone .files {
  max-height:250px;
  overflow:scroll;
}

/* file display element */
.file {
  display:inline-block;
  border:1px dashed blue;
  position:relative;
  background-color:#FFF;
  -webkit-box-shadow: 0 8px 6px -6px black;
  -moz-box-shadow: 0 8px 6px -6px black;
  box-shadow: 0 8px 6px -6px black;
  height:100px;
  width:100px;
  margin:10px;
  overflow:hidden;
}
.file .name {
  padding:10px;
  font-size:10px;
}
.file .img {
  width:100%;
  margin:10px;
  text-align:center;
}
.file .remove{
  display:block;
  position: absolute;
  top: -10px;
  right: -8px;
  width: 20px;
  height: 20px;
  background-image:  url( "http://phi.hbox.hightail.com/web/en_US/theme_default/images/icons-sprite.png" );
  background-position: 0 -125px;
}

.btcf:after {
	content:"";
	display:table;
	clear:both;
}

## jsbin.iSoxEKU.html
<!DOCTYPE html>
<html>
  <head >
    <script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="lodash.js@2.1.0" data-semver="2.1.0" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.1.0/lodash.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>
  <body id="hello">
    <div class="header"><img src="http://lorempixel.com/950/200/technics/1/Header%20Page/"> </div>
      <div class="content btcf">
          <div class="col left"><div>
            <img src="http://placehold.it/500x600&text=left+column" class="lcgen" />
          </div></div>
          <div class="col right">
              <div class="component dropzone">
                  <div class="droptarget">
                    <h1>Drop Anywhere</h1>
                      <button class="btnMore">Add Files</button>
                      <button class="btnLess">Remove</button>
                  </div>
                  <div class="files">

                  </div>
              </div>
              <img src="http://placehold.it/400x600&text=more+right+column" class="lcgen" />
          </div>
      </div>
    <div class="footer"><div>footer</div></div>
    <script type="higtail_tmpl/html" id="tmplFile">
      <div class="file">
        <a class="btnRemove"></a>
        <div class="img"><img src="<%= img %>"/></div>
        <div class="name"><%= name %></div>
        <div class="size"><%= size %> Mb</div>
      </div>
    </script>
  </body>
</html>

## jsbin.iSoxEKU.js
$(function(){
	var FILES = [	{type:"png",src:"https://www.hightail.com/web/images/ws/icons/large/i_file_image.png"},	{type:"jpg",src:"https://www.hightail.com/web/images/ws/icons/large/i_file_image.png"},	{type:"gif",src:"https://www.hightail.com/web/images/ws/icons/large/i_file_image.png"},	{type:"pdf",src:"https://www.hightail.com/web/images/ws/icons/large/i_file_pdf.png"},	{type:"htm",src:"https://www.hightail.com/web/images/ws/icons/large/i_file_default.png"},	{type:"xml",src:"https://www.hightail.com/web/images/ws/icons/large/i_file_default.png"}],
		btnMore = $(".btnMore"),
		btnLess = $(".btnLess"),
		fileTmpl = $("#tmplFile").html(),
		addContent = function(n,target){
			_.times(n,function(){
				target.prepend(getFile());
			});
		},
		removeContent = function(n,target){
			_.times(n,function(){
				target.append(getFile());
			});
		},
		getFile = function(){
			var file = FILES[Math.floor(Math.random()*FILES.length)];
			return _.template(fileTmpl,{
				img:file.src,
				name:btoa(Math.random()).substr(10) + "." + file.type,
				size:Math.floor(Math.random()*1023)
			});
		};
	btnMore.click(function(e) {
		addContent(Math.ceil(Math.random()*5),$(e.target).parents(".component").find(".files"));
	});
	btnLess.click(function(e) {
		console.log("btnLess");
		_.times(Math.floor(Math.random()*5),function(){
			var file = $(e.target).parents(".component").find(".files .file").eq(0).remove();
		});
	});
  var size = "500x600&text=more+right+column";
  $(".lcgen").click(function(){
    size=prompt(size);
    $(this).attr("src","http://placehold.it/" + size);
  });

});
	body {
	background-color:#444;
	font-family:helvetica, arial
	}
	.content {
	margin:0 auto;
	width:950px;
	background-color: #EEE;
	padding:0;
	}
	.footer {
	margin:0 auto;
	padding:0;
	width:950px;
	background-color:#222;
	color:#FFF;
	font-size:16px;
	}
	.footer div {
	padding:30px;
	}
	.header {
	margin:0px auto;
	padding:0px;
	width:950px;
	background-color:#F63;
	color:#FFF;
	font-size:16px;
	}
	.col {
	float:left;
	padding:10px;
	}
	.col.left {
	width:500px;
	float:left;
	outline:1px dashed blue;
	background-color:#FFc;
	}
	.col.right {
	width:400px;
	float:left;
	outline:1px dashed red;
	background-color:#FF9;
	}
	.component {
	width:100%;
	}
	/* drop zone */
	.dropzone {
	min-height:267px;
	}
	.dropzone .droptarget {
	background-color:#F63;
	color:#FFF;
	border-radius:10px;
	height:150px;
	}
	.dropzone .files {
	max-height:250px;
	overflow:scroll;
	}

	/* file display element */
	.file {
	display:inline-block;
	border:1px dashed blue;
	position:relative;
	background-color:#FFF;
	-webkit-box-shadow: 0 8px 6px -6px black;
	-moz-box-shadow: 0 8px 6px -6px black;
	box-shadow: 0 8px 6px -6px black;
	height:100px;
	width:100px;
	margin:10px;
	overflow:hidden;
	}
	.file .name {
	padding:10px;
	font-size:10px;
	}
	.file .img {
	width:100%;
	margin:10px;
	text-align:center;
	}
	.file .remove{
	display:block;
	position: absolute;
	top: -10px;
	right: -8px;
	width: 20px;
	height: 20px;
	background-image: url( "http://phi.hbox.hightail.com/web/en_US/theme_default/images/icons-sprite.png" );
	background-position: 0 -125px;
	}

	.btcf:after {
	content:"";
	display:table;
	clear:both;
	}
	<!DOCTYPE html>
	<html>
	<head >
	<script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
	<script data-require="lodash.js@2.1.0" data-semver="2.1.0" src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.1.0/lodash.min.js"></script>
	<link rel="stylesheet" href="style.css" />
	<script src="script.js"></script>
	</head>
	<body id="hello">
	<div class="header"><img src="http://lorempixel.com/950/200/technics/1/Header%20Page/"> </div>
	<div class="content btcf">
	<div class="col left"><div>
	<img src="http://placehold.it/500x600&text=left+column" class="lcgen" />
	</div></div>
	<div class="col right">
	<div class="component dropzone">
	<div class="droptarget">
	<h1>Drop Anywhere</h1>
	<button class="btnMore">Add Files</button>
	<button class="btnLess">Remove</button>
	</div>
	<div class="files">

	</div>
	</div>
	<img src="http://placehold.it/400x600&text=more+right+column" class="lcgen" />
	</div>
	</div>
	<div class="footer"><div>footer</div></div>
	<script type="higtail_tmpl/html" id="tmplFile">
	<div class="file">
	<a class="btnRemove"></a>
	<div class="img"><img src="<%= img %>"/></div>
	<div class="name"><%= name %></div>
	<div class="size"><%= size %> Mb</div>
	</div>
	</script>
	</body>
	</html>
	$(function(){
	var FILES = [ {type:"png",src:"https://www.hightail.com/web/images/ws/icons/large/i_file_image.png"}, {type:"jpg",src:"https://www.hightail.com/web/images/ws/icons/large/i_file_image.png"}, {type:"gif",src:"https://www.hightail.com/web/images/ws/icons/large/i_file_image.png"}, {type:"pdf",src:"https://www.hightail.com/web/images/ws/icons/large/i_file_pdf.png"}, {type:"htm",src:"https://www.hightail.com/web/images/ws/icons/large/i_file_default.png"}, {type:"xml",src:"https://www.hightail.com/web/images/ws/icons/large/i_file_default.png"}],
	btnMore = $(".btnMore"),
	btnLess = $(".btnLess"),
	fileTmpl = $("#tmplFile").html(),
	addContent = function(n,target){
	_.times(n,function(){
	target.prepend(getFile());
	});
	},
	removeContent = function(n,target){
	_.times(n,function(){
	target.append(getFile());
	});
	},
	getFile = function(){
	var file = FILES[Math.floor(Math.random()*FILES.length)];
	return _.template(fileTmpl,{
	img:file.src,
	name:btoa(Math.random()).substr(10) + "." + file.type,
	size:Math.floor(Math.random()*1023)
	});
	};
	btnMore.click(function(e) {
	addContent(Math.ceil(Math.random()*5),$(e.target).parents(".component").find(".files"));
	});
	btnLess.click(function(e) {
	console.log("btnLess");
	_.times(Math.floor(Math.random()*5),function(){
	var file = $(e.target).parents(".component").find(".files .file").eq(0).remove();
	});
	});
	var size = "500x600&text=more+right+column";
	$(".lcgen").click(function(){
	size=prompt(size);
	$(this).attr("src","http://placehold.it/" + size);
	});

	});