Two columns based layout

Categories: Elastic

This post is on how to use Elastic CSS Framework to create a simple two column layout.

The layout consists of a header, a main content column, a right sidebar, and a footer. It is also horizontally centered in the browser window. A pretty basic layout, and not at all difficult to create with Elastic CSS Framework and the best part is you don’t need to worry about browser specific hacks.

First you need to download the latest version of Elastic CSS Framework from Github.com, unzip the file, rename the resulted directory to elastic and copy it to your project.

Now lets beging…

Basically our layout should look like this:

two column layout thumb

In order to use Elastic you need to create an HTML document (index.html) and include all the CSS and Javascript files Elastic has:

	<script src="/elastic//jquery.js" type="text/javascript"></script>
	<script src="/elastic/elastic.js" type="text/javascript"></script>

Notice the “/stylesheets/skin.css” file, well here is where all our custom CSS will live, so you can let all Elastic files untouched.

Now lets make our layout. Lets work on a 960px wide container aligned on center and a light-grey background just to diferentiate.

You have to add the following CSS code in stylesheets/skin.css:

	div.layout{
		width : 960px;
  	min-width : 960px;
  	min-height : 500px;
  	margin : auto;
  	background : #F0F0F0;
	}

Now add the markup to your HTML document:

	<div class="unit layout"></div>

Now that we have our main container lets the fun stuff begin.
Lets work on the header part. It has to be 100px tall and 100% wide, well that’ easy:

Add this to skin.css:

	div.header{
		height : 100px;
		background : #C0C0C0;
	}

And the HTML should look like this:

	<div class="unit layout">
		<div class="unit header">

		</div>
	</div>

Now lets make the two columns and the footer.
With Elastic CSS Framework is easy to make columns that have the same height, full height and truly behave like a columns

So this is our final CSS file:

	div.layout{
		width : 960px;
		min-width : 960px;
		min-height : 500px;
		margin : auto;
		background : #F0F0F0;
	}

	div.header{
		height : 100px;
		background : #C0C0C0;
	}

	div.main-content{
		background : #CCC;
	}

	div.sidebar{
		background : #FFF;
	}

	div.footer{
		height : 100px;
		text-align : center;
		background : #C0C0C0;
	}

And this is how our final HTML file should look like:

	<div class="unit layout">
	  <div class="unit header">
	    <h1>Header</h1>
	  </div>
	  <div class="unit full-height on-2 columns same-height">
	    <div class="elastic column full-height main-content">
	      <div class="container" style="padding:10px">
	        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	      </div>
	    </div>
	    <div class="fixed column full-height sidebar" style="width: 320px;">
	      <div class="container" style="padding:10px">
	        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	      </div>
	    </div>
	  </div>
	  <div class="unit footer">
	    Elastic CSS Framework Two Column Layout
	  </div>
	</div>

UPDATE: Working demo here

See, its pretty easy to make layouts with Elastic CSS Framework, now it is up to you to add some grpahics, icons and typography.

Thanks for reading and feel free to comment.