.wrapAll regardless of initial positioning in DOM

wrapAll to float & make left & right columns

by Ian Roberts

HTML

<div class="siteContainer">
<div class="layoutContainer"></div>
<div class="layoutContainer homeLeft"></div>
<div class="layoutContainer homeRight"></div>
<div class="layoutContainer homeLeft"></div>
<div class="layoutContainer homeRight"></div>
<div class="layoutContainer"></div>
</div>

CSS

.siteContainer {width:100%;background:#900;}
div {background:#333;}
.layoutContainer {height:100px; width:100%;float:left;}
.wrapLeft {float:left; width:66%;background:#eee;}
.wrapRight {float:right; width:33%;background:#ddd;}
.homeLeft {background:#eee;}
.homeRight {background:#ddd;}

JavaScript

$('.homeLeft').wrapAll('<div class="wrapLeft"></div>');
$('.homeRight').wrapAll('<div class="wrapRight"></div>');