Relax Breath of Solution.Community tech blog of Sameera Thilakasiri - Consultant UI, UX, RWD Specialist/ Interactive Designer

Just I wanted.. Do you?…

Faux Columns Technique

Posted on April 2, 2011 | No Comments

It is very common in layouts to have 2 columns next to each other, with one column having a background color, and the other column just being white. Since the columns will almost never have the same amount of content in them, the easiest way to fake this, is to have a 1px tall background image being repeated vertically in the containing element of the 2 columns.

The Markup

<div     id="container">
 <div id="primaryContent">
  <h1>Primary   Column</h1>
 <div id="secondaryContent">
    <h2>Secondary   Column</h2>
 <div class="clearing"></div>


div#container { 
   background:   url(/images/content/2008/03/content-bg.gif)     repeat-y top right;
 padding:     10px 0;
 width:   640px;
div#primaryContent   {   float: left;   padding:   0 10px; width: 400px; }
div#secondaryContent   {   float: right; padding: 0 10px;     width:   200px;   } 

Sameera Thilakasiri By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.


Leave a Reply

You must be logged in to post a comment.