jQuery in Action

Bear Bibeault / Yehuda Katz

View Complete eBook Now (277 Pages)

Download jquery.js (Complete)
Download jquery.js (Minified)

Filed under: Uncategorized , complete ebook, download, ebook, free, jquery, jquery in action, kunal, vijan, vijan87

Happy Diwali

Happy Diwali(click to expand)

Filed under: Uncategorized , 2009, diwali, diwali card, happy diwali, Kunal Vijan, vijan87, wishes

CSS Technique for Equal Column

Here this post describes the simple technique using position and border technique. This is basically two columns are aligned together and right side column have been placed on border using position:absolute.

HTML

<div id="mainwrapper">
<div id="maincontent">Lorem Ipsum is a...</div>
<div id="rightcolumn">Right side dummy...</div>
</div>

CSS

.mainwrapper{margin:0 auto; width:600px;}

#maincontent{border-right:solid 200px #DFDFDF;
position:absolute; width:400px;}

#rightcolumn{background:#DFDFDF; margin-left:400px;
position:absolute; width:200px;}

This will create a mainwrapper with 600 width and maincontent with 400 width with right border of 200 pixels so that right column equal height will maintain and siderbar is placed on the 200px border with the left margin of 400px for exact palcement.

Result:

>> View Example

Filed under: Advanced Blog, Computer, Latest technology, Technology , css, css 2.0, css equal column, css help, div equal column height, equal column, Kunal Vijan, tips, tricks, vijaan87