#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

with

#outer-wrapper {
width: 700px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE

*/
overflow: hidden; /* fix for long non-text content breaking IE

sidebar float */
}

with

#sidebar-wrapper1 {
width: 130px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE

*/
overflow: hidden; /* fix for long non-text content breaking IE

sidebar float */
}

#sidebar-wrapper2 {
width: 130px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE

*/
overflow: hidden; /* fix for long non-text content breaking IE

sidebar float */

I have divided the sidebar into 2 parts sidebar1 & sidebar 2 and floated sidebar1 to left,sidebar2 to right

<div id=’main-wrapper’>
<b:section class=’main’ id=’main’ showaddelement=’no’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>
</div>

<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
</b:section>
</div>

with

<div id=’sidebar-wrapper1′>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
</b:section>
</div>
<div id=’main-wrapper’>
<b:section class=’main’ id=’main’ showaddelement=’no’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>
</div>

<div id=’sidebar-wrapper2′>
<b:section class=’sidebar1′ id=’sidebar1′ preferred=’yes’>
</b:section>
</div>

I have changed Main + sidebar to sidebar1 + Main + sidebar2