StackAt jQuery Plugin
StackAt Demo Page
StackAt allows developers to fine tune the width of split elements, the width they stack at, and the stack order
Left Fixed & Right Remainder
Left Over Right
Left
Fixed at 200px
Right
Fill Remainder
<div class="stackAt" stackAt="520">
<div class="splitEl" style="width:200px; float:left">
<h2>Left</h2>
</div>
<div class="splitEl" style="margin-left:200px">
<h2>Right</h2>
</div>
</div>Right Over Left
Right
Fill Remainder
Left
Fixed at 200px
<div class="stackAt" stackAt="520">
<div class="splitEl" column-index="2" remainder-width="100%">
<h2>Right</h2>
</div>
<div class="splitEl" column-index="1" fixed-width="200">
<h2>Left</h2>
</div>
</div>Right Fixed & Left Remainder
Left Over Right
Left
Fill Remainder
Right
Fixed at 200px
<div class="stackAt" stackAt="520">
<div class="splitEl" remainder-width="100%">
<h2>Left</h2>
</div>
<div class="splitEl" fixed-width="200">
<h2>Right</h2>
</div>
</div>Right Over Left
Right
Fixed at 200px
Left
Fill Remainder
<div class="stackAt" stackAt="520">
<div class="splitEl" style="width:200px; float:right">
<h2>Right</h2>
</div>
<div class="splitEl" style="margin-left:200px">
<h2>Left</h2>
</div>
</div>2 Column Percentage Split
Left Over Right
Left
40% of Width
Right
60% of Width
<div class="stackAt" stackAt="520">
<div class="splitEl" style="float:left;width:40%">
<h2>Left</h2>
</div>
<div class="splitEl" style="float:left;width:60%">
<h2>Right</h2>
</div>
</div>Right Over Left
Right
40% of Width
Left
60% of Width
<div class="stackAt" stackAt="520">
<div class="splitEl" style="float:right;width:40%">
<h2>Right</h2>
</div>
<div class="splitEl" style="float:right;width:60%">
<h2>Left</h2>
</div>
</div>3 Column Percentage Split
Left / Center / Right
Left
33.3% of Width
Center
33.3% of Width
Right
33.3% of Width
<div class="stackAt" stackAt="520">
<div class="splitEl" style="float:left;width:33.33%">
<h2>Left</h2>
</div>
<div class="splitEl" style="float:left;width:33.33%">
<h2>Center</h2>
</div>
<div class="splitEl" style="float:left;width:33.33%">
<h2>Right</h2>
</div>
</div>Left / Right / Center
Left
20% of Width
Right
30% of Width
Center
50% Remainder
<div class="stackAt" stackAt="520">
<div class="splitEl" style="float:left;width:20%">
<h2>Left</h2>
</div>
<div class="splitEl" style="float:right;width:30%">
<h2>Right</h2>
</div>
<div class="splitEl" style="margin-left:20%;margin-right:30%;width:50%">
<h2>Center</h2>
</div>
</div>Center / Left / Right
Center
40% of Width
Left
35% of Width
Right
25% of Width
<div class="stackAt" stackAt="520">
<div class="splitEl" column-index="2" remainder-width="40%">
<h2>Center</h2>
</div>
<div class="splitEl" column-index="1" remainder-width="25%">
<h2>Left</h2>
</div>
<div class="splitEl" column-index="3" remainder-width="35%">
<h2>Right</h2>
</div>
</div>Center / Right / Left
Center
40% of Width
Right
25% of Width
Left
35% of Width
<div class="stackAt" stackAt="520">
<div class="splitEl" column-index="2" remainder-width="40%">
<h2>Center</h2>
</div>
<div class="splitEl" column-index="3" remainder-width="25%">
<h2>Right</h2>
</div>
<div class="splitEl" column-index="1" remainder-width="35%">
<h2>Left</h2>
</div>
</div>Right / Center / Left
Right
33.3% of Width
Center
33.3% of Width
Left
33.3% of Width
<div class="stackAt" stackAt="520">
<div class="splitEl" style="float:right;width:33.33%">
<h2>Right</h2>
</div>
<div class="splitEl" style="float:right;width:33.33%">
<h2>Center</h2>
</div>
<div class="splitEl" style="float:right;width:33.33%">
<h2>Left</h2>
</div>
</div>Right / Left / Center
Right
30% of Width
Left
20% of Width
Center
50% of Width
<div class="stackAt" stackAt="520">
<div class="splitEl" style="float:right;width:30%">
<h2>Right</h2>
</div>
<div class="splitEl" style="float:left;width:20%">
<h2>Left</h2>
</div>
<div class="splitEl" style="margin-left:20%;margin-right:30%;width:50%">
<h2>Center</h2>
</div>
</div>Left & Right Fixed, Center Remainder
Left / Center / Right
Left
Fixed at 100px
Center
Remainder of Width
Right
Fixed at 200px
<div class="stackAt" stackAt="520">
<div class="splitEl" fixed-width="100">
<h2>Left</h2>
</div>
<div class="splitEl" remainder-width="100%">
<h2>Center</h2>
</div>
<div class="splitEl" fixed-width="200">
<h2>Right</h2>
</div>
</div>Left / Right / Center
Left
Fixed at 100px
Right
Fixed at 200px
Center
Fill Remainder
<div class="stackAt" stackAt="520">
<div class="splitEl" style="float:left;width:100px">
<h2>Left</h2>
</div>
<div class="splitEl" style="float:right;width:200px">
<h2>Right</h2>
</div>
<div class="splitEl" style="margin-left:100px;margin-right:200px">
<h2>Center</h2>
</div>
</div>Center / Left / Right
Center
Fill Remainder
Left
Fixed at 100px
Right
Fixed at 200px
<div class="stackAt" stackAt="520">
<div class="splitEl" column-index="2" remainder-width="100%">
<h2>Center</h2>
</div>
<div class="splitEl" column-index="1" fixed-width="100">
<h2>Left</h2>
</div>
<div class="splitEl" column-index="3" fixed-width="200">
<h2>Right</h2>
</div>
</div>Center / Right / Left
Center
Fill Remainder
Right
Fixed at 200px
Left
Fixed at 100px
<div class="stackAt" stackAt="520">
<div class="splitEl" column-index="2" remainder-width="100%">
<h2>Center</h2>
</div>
<div class="splitEl" column-index="3" fixed-width="200">
<h2>Right</h2>
</div>
<div class="splitEl" column-index="1" fixed-width="100">
<h2>Left</h2>
</div>
</div>Right / Center / Left
Right
Fixed at 200px
Center
Fill Remainder
Left
Fixed at 100px
<div class="stackAt" stackAt="520">
<div class="splitEl" column-index="3" fixed-width="200">
<h2>Right</h2>
</div>
<div class="splitEl" column-index="2" remainder-width="100%">
<h2>Center</h2>
</div>
<div class="splitEl" column-index="1" fixed-width="100">
<h2>Left</h2>
</div>
</div>Right / Left / Center
Right
Fixed at 200px
Left
Fixed at 100px
Center
Fill Remainder
<div class="stackAt" stackAt="520">
<div class="splitEl" style="float:right;width:200px">
<h2>Right</h2>
</div>
<div class="splitEl" style="float:left;width:100px">
<h2>Left</h2>
</div>
<div class="splitEl" style="margin-left:100px;margin-right:200px">
<h2>Center</h2>
</div>
</div>Left Fixed, Center & Right Remainder
Left / Center / Right
Left
Fixed at 200px
Center
60% of Width
Right
40% of Width
<div class="stackAt" stackAt="520">
<div class="splitEl" fixed-width="200">
<h2>Left</h2>
</div>
<div class="splitEl" remainder-width="60%">
<h2>Center</h2>
</div>
<div class="splitEl" remainder-width="40%">
<h2>Right</h2>
</div>
</div>Left / Right / Center
Left
Fixed at 200px
Right
40% of Width
Center
60% of Width
<div class="stackAt" stackAt="520">
<div class="splitEl" column-index="1" fixed-width="200">
<h2>Left</h2>
</div>
<div class="splitEl" column-index="3" remainder-width="40%">
<h2>Right</h2>
</div>
<div class="splitEl" column-index="2" remainder-width="60%">
<h2>Center</h2>
</div>
</div>Center / Left / Right
Center
60% of Width
Left
Fixed at 200px
Right
40% of Width
<div class="stackAt" stackAt="520">
<div class="splitEl" column-index="2" remainder-width="60%">
<h2>Center</h2>
</div>
<div class="splitEl" column-index="1" fixed-width="200">
<h2>Left</h2>
</div>
<div class="splitEl" column-index="3" remainder-width="40%">
<h2>Right</h2>
</div>
</div>Center / Right / Left
Center
60% of Remainder
Right
Fixed at 200px
Left
40% of Remainder
<div class="stackAt" stackAt="520">
<div class="splitEl" column-index="2" remainder-width="60%">
<h2>Center</h2>
</div>
<div class="splitEl" column-index="3" fixed-width="200">
<h2>Right</h2>
</div>
<div class="splitEl" column-index="1" remainder-width="40%">
<h2>Left</h2>
</div>
</div>Right / Center / Left
Right
Fixed at 200px
Center
60% of Remainder
Left
40% of Remainder
<div class="stackAt" stackAt="520">
<div class="splitEl" column-index="3" fixed-width="200">
<h2>Right</h2>
</div>
<div class="splitEl" column-index="2" remainder-width="60%">
<h2>Center</h2>
</div>
<div class="splitEl" column-index="1" remainder-width="40%">
<h2>Left</h2>
</div>
</div>Right / Left / Center
Right
Fixed at 200px
Left
40% of Remainder
Center
60% of Remainder
<div class="stackAt" stackAt="520">
<div class="splitEl" column-index="3" fixed-width="200">
<h2>Right</h2>
</div>
<div class="splitEl" column-index="1" remainder-width="40%">
<h2>Left</h2>
</div>
<div class="splitEl" column-index="2" remainder-width="60%">
<h2>Center</h2>
</div>
</div>Right Fixed, Left & Center Remainder
Left / Center / Right
Left
40% of Remainder
Center
60% of Remainder
Right
Fixed at 200px
<div class="stackAt" stackAt="520">
<div class="splitEl" remainder-width="40%">
<h2>Left</h2>
</div>
<div class="splitEl" remainder-width="60%">
<h2>Center</h2>
</div>
<div class="splitEl" fixed-width="200">
<h2>Right</h2>
</div>
</div>Left / Right / Center
Left
40% of Remainder
Right
Fixed at 200px
Center
60% of Remainder
<div class="stackAt" stackAt="520">
<div class="splitEl" column-index="1" remainder-width="40%">
<h2>Left</h2>
</div>
<div class="splitEl" column-index="3" fixed-width="200">
<h2>Right</h2>
</div>
<div class="splitEl" column-index="2" remainder-width="60%">
<h2>Center</h2>
</div>
</div>Center / Left / Right
Center
60% of Remainder
Left
40% of Remainder
Right
Fixed at 200px
<div class="stackAt" stackAt="520">
<div class="splitEl" column-index="2" remainder-width="60%">
<h2>Center</h2>
</div>
<div class="splitEl" column-index="1" remainder-width="40%">
<h2>Left</h2>
</div>
<div class="splitEl" column-index="3" fixed-width="200">
<h2>Right</h2>
</div>
</div>Center / Right / Left
Center
60% of Remainder
Right
Fixed at 200px
Left
40% of Remainder
<div class="stackAt" stackAt="520">
<div class="splitEl" column-index="2" remainder-width="60%">
<h2>Center</h2>
</div>
<div class="splitEl" column-index="3" fixed-width="200">
<h2>Right</h2>
</div>
<div class="splitEl" column-index="1" remainder-width="40%">
<h2>Left</h2>
</div>
</div>Right / Center / Left
Right
Fixed at 200px
Center
60% of Remainder
Left
40% of Remainder
<div class="stackAt" stackAt="520">
<div class="splitEl" column-index="3" fixed-width="200">
<h2>Right</h2>
</div>
<div class="splitEl" column-index="2" remainder-width="60%">
<h2>Center</h2>
</div>
<div class="splitEl" column-index="1" remainder-width="40%">
<h2>Left</h2>
</div>
</div>Right / Left / Center
Right
Fixed at 200px
Left
40% of Remainder
Center
60% of Remainder
<div class="stackAt" stackAt="520">
<div class="splitEl" column-index="3" fixed-width="200">
<h2>Right</h2>
</div>
<div class="splitEl" column-index="1" remainder-width="40%">
<h2>Left</h2>
</div>
<div class="splitEl" column-index="2" remainder-width="60%">
<h2>Center</h2>
</div>
</div>Center Fixed, Left & Right Remainder
Left / Center / Right
Left
40% of Remainder
Center
Fixed at 200px
Right
60% of Remainder
<div class="stackAt" stackAt="520">
<div class="splitEl" remainder-width="40%">
<h2>Left</h2>
</div>
<div class="splitEl" fixed-width="200">
<h2>Center</h2>
</div>
<div class="splitEl" remainder-width="60%">
<h2>Right</h2>
</div>
</div>Left / Right / Center
Left
40% of Remainder
Right
60% of Remainder
Center
Fixed at 200px
<div class="stackAt" stackAt="520">
<div class="splitEl" column-index="1" remainder-width="40%">
<h2>Left</h2>
</div>
<div class="splitEl" column-index="3" remainder-width="60%">
<h2>Right</h2>
</div>
<div class="splitEl" column-index="2" fixed-width="200">
<h2>Center</h2>
</div>
</div>Center / Left / Right
Center
Fixed at 200px
Left
40% of Remainder
Right
60% of Remainder
<div class="stackAt" stackAt="520">
<div class="splitEl" column-index="2" fixed-width="200">
<h2>Center</h2>
</div>
<div class="splitEl" column-index="1" remainder-width="40%">
<h2>Left</h2>
</div>
<div class="splitEl" column-index="3" remainder-width="60%">
<h2>Right</h2>
</div>
</div>Center / Right / Left
Center
Fixed at 200px
Right
60% of Remainder
Left
40% of Remainder
<div class="stackAt" stackAt="520">
<div class="splitEl" column-index="2" fixed-width="200">
<h2>Center</h2>
</div>
<div class="splitEl" column-index="3" remainder-width="60%">
<h2>Right</h2>
</div>
<div class="splitEl" column-index="1" remainder-width="40%">
<h2>Left</h2>
</div>
</div>Right / Center / Left
Right
60% of Remainder
Center
Fixed at 200px
Left
40% of Remainder
<div class="stackAt" stackAt="520">
<div class="splitEl" column-index="3" remainder-width="60%">
<h2>Right</h2>
</div>
<div class="splitEl" column-index="2" fixed-width="200">
<h2>Center</h2>
</div>
<div class="splitEl" column-index="1" remainder-width="40%">
<h2>Left</h2>
</div>
</div>Right / Left / Center
Right
60% of Remainder
Left
40% of Remainder
Center
Fixed at 200px
<div class="stackAt" stackAt="520">
<div class="splitEl" column-index="3" remainder-width="60%">
<h2>Right</h2>
</div>
<div class="splitEl" column-index="1" remainder-width="40%">
<h2>Left</h2>
</div>
<div class="splitEl" column-index="2" fixed-width="200">
<h2>Center</h2>
</div>
</div>