tschueller/2colunns.html

## 2colunns.html
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>2 Columns Page Layout</title>

    <style type="text/less">

        @col1BGColor: #dad09a;
        @col1Width: 200px;
        @col2BGColor: #F5F5DB;
        @col2Width: 760px;
        @contentBorder: 1px solid #ccc;

        .content-container {
            position: relative;
            margin: 0 auto;
            overflow: hidden;
            width: @col1Width + @col2Width + 7px;
        }

        .content-left {
          -webkit-border-top-left-radius: 12px;
          -webkit-border-bottom-left-radius: 12px;
          -moz-border-radius-topleft: 12px;
          -moz-border-radius-bottomleft: 12px;
          border-top-left-radius: 12px;
          border-bottom-left-radius: 12px;

          margin-right: @col1Width;
          background-color: @col1BGColor;
          border: @contentBorder;
          box-sizing: content-box;
          position: relative;
        }

        .content-right {
          -webkit-border-top-right-radius: 12px;
          -webkit-border-bottom-right-radius: 12px;
          -moz-border-radius-topright: 12px;
          -moz-border-radius-bottomright: 12px;
          border-top-right-radius: 12px;
          border-bottom-right-radius: 12px;

          right: -@col1Width;
          margin-top: -1px;
          margin-bottom: -1px;
          position: relative;
          background-color: @col2BGColor;
          position: relative;
          border: @contentBorder;
          border-left: none;
          box-sizing: border-box;
        }

        .content-right::before {
            content: " ";
            position: absolute;
            width: 3px;
            left: 0px;
            top:0;
            bottom:0;

            background: -moz-linear-gradient(left,  rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.30)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(left,  rgba(0,0,0,0.30) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(left,  rgba(0,0,0,0.30) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(left,  rgba(0,0,0,0.30) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
            background: linear-gradient(to right,  rgba(0,0,0,0.30) 0%,rgba(0,0,0,0) 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
        }

        .content-center {
            min-height: 150px;
            background-color: transparent;
            margin: 0 0 0 -@col1Width;
            overflow: hidden;
            position: relative;
        }

        .col1 {
            float: left;
            width: @col1Width;
        }

        .col2 {
            float: right;
            width: @col2Width;
        }

    </style>

    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.5/less.min.js"></script>
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
      jQuery(function () {
          var text = '<p style="padding: 0 10px 5px 10px">Lorem ipsum dolor siop 25et, consectetuer adipis50 cing elit, sed diam no75nummy nibh euismod tin100 ddunt ut laoreet dolo125re magna aliquam erat 150olutpat. Ut wisi enim 175ad minim veniam, quis 200nostrud exerci tabon u225 llamcorper suscipit g250bs nisl ut aliquip ex 275commodo consequat. Dui300utem vel eum iriure do325 in henderit in vulput350 velit esse molestie c375equat,vel illum dolore400</p>';
          $(".addText").click(function(){
             $("."+$(this).data("target")).append(text);
          });
      });
    </script>

</head>
<body style="background:#eee">

  <div class="content-container">
    <header id="pageHeader">
       <h1>This is the main header.</h1>
    </header>

    <div class="content-left">
      <div class="content-right">
        <div class="content-center">

          <div class="col1"></div>
          <div class="col2"></div>

        </div>
      </div>
    </div>

    <footer id="pageFooter" >
        <a href="#" class="addText" data-target="col1" style="float: left; padding: 12px;">Add text to column 1</a>
        <a href="#" class="addText" data-target="col2" style="float: right; padding: 12px;">Add text to column 2</a>
    </footer>

  </div>

</body>
</html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<title>2 Columns Page Layout</title>

	<style type="text/less">

	@col1BGColor: #dad09a;
	@col1Width: 200px;
	@col2BGColor: #F5F5DB;
	@col2Width: 760px;
	@contentBorder: 1px solid #ccc;

	.content-container {
	position: relative;
	margin: 0 auto;
	overflow: hidden;
	width: @col1Width + @col2Width + 7px;
	}

	.content-left {
	-webkit-border-top-left-radius: 12px;
	-webkit-border-bottom-left-radius: 12px;
	-moz-border-radius-topleft: 12px;
	-moz-border-radius-bottomleft: 12px;
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;

	margin-right: @col1Width;
	background-color: @col1BGColor;
	border: @contentBorder;
	box-sizing: content-box;
	position: relative;
	}

	.content-right {
	-webkit-border-top-right-radius: 12px;
	-webkit-border-bottom-right-radius: 12px;
	-moz-border-radius-topright: 12px;
	-moz-border-radius-bottomright: 12px;
	border-top-right-radius: 12px;
	border-bottom-right-radius: 12px;

	right: -@col1Width;
	margin-top: -1px;
	margin-bottom: -1px;
	position: relative;
	background-color: @col2BGColor;
	position: relative;
	border: @contentBorder;
	border-left: none;
	box-sizing: border-box;
	}

	.content-right::before {
	content: " ";
	position: absolute;
	width: 3px;
	left: 0px;
	top:0;
	bottom:0;

	background: -moz-linear-gradient(left, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.30)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.30) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(0,0,0,0.30) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left, rgba(0,0,0,0.30) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
	background: linear-gradient(to right, rgba(0,0,0,0.30) 0%,rgba(0,0,0,0) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
	}

	.content-center {
	min-height: 150px;
	background-color: transparent;
	margin: 0 0 0 -@col1Width;
	overflow: hidden;
	position: relative;
	}

	.col1 {
	float: left;
	width: @col1Width;
	}

	.col2 {
	float: right;
	width: @col2Width;
	}

	</style>

	<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.5/less.min.js"></script>
	<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
	<script>
	jQuery(function () {
	var text = '<p style="padding: 0 10px 5px 10px">Lorem ipsum dolor siop 25et, consectetuer adipis50 cing elit, sed diam no75nummy nibh euismod tin100 ddunt ut laoreet dolo125re magna aliquam erat 150olutpat. Ut wisi enim 175ad minim veniam, quis 200nostrud exerci tabon u225 llamcorper suscipit g250bs nisl ut aliquip ex 275commodo consequat. Dui300utem vel eum iriure do325 in henderit in vulput350 velit esse molestie c375equat,vel illum dolore400</p>';
	$(".addText").click(function(){
	$("."+$(this).data("target")).append(text);
	});
	});
	</script>

	</head>
	<body style="background:#eee">

	<div class="content-container">
	<header id="pageHeader">
	<h1>This is the main header.</h1>
	</header>

	<div class="content-left">
	<div class="content-right">
	<div class="content-center">

	<div class="col1"></div>
	<div class="col2"></div>

	</div>
	</div>
	</div>

	<footer id="pageFooter" >
	<a href="#" class="addText" data-target="col1" style="float: left; padding: 12px;">Add text to column 1</a>
	<a href="#" class="addText" data-target="col2" style="float: right; padding: 12px;">Add text to column 2</a>
	</footer>

	</div>

	</body>
	</html>