BrsrLab shows incorrect layout, yet online is correct

i have two-column layout, main content div liquid, right sidebar fixed px. http://www.placetrenddata.com/mysite. across browsers, lab shows right sidebar not fitting next main content. have taken out ruler , measured width of 2 columns, measure equally in dwvr , in lab. width of container in lab less, seemingly make bad fit.

 

the hybrid layout evolved because: 1) not want banner @ full width, , 2) therefore, hybrid layout 1 kept right sidebar jumping down. i'm not sure going on, since @ least in ie8, sidebar right, ie8 in lab jumps below. advice on this, or hybrid layout in general.

 

@charset "utf-8";

body {
background-color: #ccc;
background-image: url(../images/bckgrnd.png);
}

/* css document */

#container {
background-color: #999966;
margin-right: auto;
margin-left: auto;
width: 85%;
overflow: hidden;
}

#page {
float: left;
width: 65%;
font-family: tahoma, geneva, sans-serif;
color: #306;
margin-right: auto;
margin-left: auto;
overflow: hidden;
}
#banner {
float: left;
width: 100%;
background-color: #9999cc;
}
#nav-links {
font-family: verdana, geneva, sans-serif;
font-size: 16px;
margin-right: auto;
margin-left: auto;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
}

#main-content {
float: left;
width: 100%;
background-color: #99cc99;
/* [disabled]padding-left: 10px; */
}

#main-content h1 {
font-size: 22px;
}
#main-content h2 {
font-size: 16px;
color: #00f;
}
#sale-item {
float: left;
width: 565px;
margin-top: 10px;
/* [disabled]margin-bottom: 0px; */

}
#sale-item p {
/* [disabled]width:11em; */
/* [disabled]word-wrap:break-word; */
line-height: 1.2;
}

#main-content img {
align:center;
float: left;
display: block;
}
#main-content #item-text {
padding-left: 103
.px;
display: inline-block;
/* ie 7 */
zoom:1;

*display: inline;
width: 15em;
/* [disabled]text-align: right; */
/* [disabled]word-wrap: break-word; */
}
#button {
float: left;
}

#r-sidebar {
float: right;
width: 290px;
position: relative;
background-color: #c99;
font-family: verdana, geneva, sans-serif;
margin-right: 8px;
}
#beachphoto {
text-align: center;
padding-top: 10px;
display: compact;
}

#r-sidebar #sbwrap-one {
margin: 0px;
}

#r-sidebar #sbscript-one {
/* [disabled]display: compact; */
padding-top: 5px;
}
.align-center {
text-align: center;
}

#footer {
/* [disabled]position: relative; */
/* [disabled]float: left; */
width: 85%;
margin-right: auto;
margin-left: auto;
background-color: #9999cc;
margin-top: 0px;

More discussions in Adobe Story

adobe