css - Bootstrap and Telerik RadPageLayout DIVs overlap at certain browser widths -

i using telerik radpagelayout, generates bootstrap html tags. problem when user stretches expand or contract browser width, @ widths, divs begin overlap. believe happening because divs use fixed widths, mandatory because don't want internal content of divs stretch or contract.

are span tags configured incorrectly? there can fix without changing div's fixed widths?

<telerik:radpagelayout runat="server" gridtype="fluid" showgrid="true" htmltag="none" cssclass="radlayout" >     <telerik:layoutrow rowtype="generic">         <rows>              <telerik:layoutrow rowtype="generic" cssclass="content">                 <rows>                     <telerik:layoutrow rowtype="container" wrapperhtmltag="div">                         <columns>                             <telerik:layoutcolumn span="12">                                 <telerik:radbinaryimage runat="server" imageurl="dashboardfiles/images/dashboard_flat.png" />                             </telerik:layoutcolumn>                         </columns>                     </telerik:layoutrow>                      <telerik:layoutrow rowtype="container" wrapperhtmltag="div">                         <columns>                             <telerik:layoutcolumn span="12">                                 <div class="dashbox dashconfigpanel">                                     // date range content here                                 </div>                             </telerik:layoutcolumn>                         </columns>                     </telerik:layoutrow>                 </rows>             </telerik:layoutrow>              <telerik:layoutrow rowtype="generic" cssclass="content">                 <rows>                     <telerik:layoutrow rowtype="container" wrapperhtmltag="div">                         <columns>                              <telerik:layoutcolumn span="4" spanlg="6" spanxl="4" cssclass="layoutcolumnwithoutgrid">                                 <div class="dashbox dashboxchart">                                     <h3 class="greytitle">new business</h3>                                     // chart content here                                      // grid content here                                 </div>                             </telerik:layoutcolumn>                              <telerik:layoutcolumn span="4" spanlg="6" spanxl="4" cssclass="layoutcolumnwithoutgrid">                                 <div class="dashbox dashboxchart">                                     <h3 class="greytitle">salesperson production</h3>                                     // chart content here                                 </div>                             </telerik:layoutcolumn>                              <telerik:layoutcolumn span="4" spanlg="6" spanxl="4" cssclass="layoutcolumnwithgrid">                                 <div class="dashbox dashboxchart">                                     <h3 class="greytitle">top producers</h3>                                     // chart content here                                      // grid content here                                 </div>                             </telerik:layoutcolumn>                          </columns>                     </telerik:layoutrow>                 </rows>             </telerik:layoutrow>         </rows>     </telerik:layoutrow> </telerik:radpagelayout> 

css below:

/*containers*/ #dashcontent .dashwrapper {     /*width: 1200px;*/     margin: 0 auto; }  /*sprites*/ /*.dashbox h3 {     background-image: url(../images/sprite.png);     background-repeat: repeat-x; }*/  /*content*/ #dashcontent {     /*background: transparent url(../images/olympic_rings.png) no-repeat 50% 100%;*/ }  .dashwrapper {     padding: 25px 0 18px; }  #dashcontent h2 {     font-size: 24px;     color: #064487;     margin-bottom: 10px; }  .dashbox {     padding: 15px 17px;     margin: 34px 0px 50px;     border-radius: 0 5px 5px 5px;     background: #fff;     background: rgba(255,255,255,0.7);     background: rgba(255,255,255,0.7) -moz-linear-gradient(top,rgba(255,255,255,1),rgba(255,255,255,0.1));     background: rgba(255,255,255,0.7) -o-linear-gradient(top,rgba(255,255,255,1),rgba(255,255,255,0.5));     background: rgba(255,255,255,0.7) -webkit-linear-gradient(top bottom,rgba(255,255,255,1),rgba(255,255,255,0.5));     background: rgba(255,255,255,0.7) linear-gradient(top bottom,rgba(255,255,255,1),rgba(255,255,255,0.5));     position: relative;     color: #234166;     box-shadow: 0 0 5px #c4cacc; }  .dashbox h3 {     height: 34px;     line-height: 34px;     display: inline-block;     position: absolute;     left: 0;     top: -34px;     padding: 0 15px;     color: #fff;     text-transform: uppercase;     border-radius: 5px 5px 0 0; }  .dashboxchart {     width: 400px;     /*padding-top: 40px;*/ }  .chart-sized {     /*padding-top: 40px;*/ }  .bluetitle {     background-position: 0 -100px;     background-color: #0f4086; }  .redtitle {     background-position: 0 -200px;     background-color: #a5001e; }  .greentitle {     background-position: 0 -300px;     background-color: #6ba212; }  .greytitle {     /*background-position: 0 -400px;*/     background-color: rgb(51,51,51); }  .orangetitle {     background-position: 0 -400px;     background-color: #ef8d01; }   .dashconfigpanel {     border-top-left-radius: 5px;     margin: 0 0 20px;     background-color: rgb(55,148,187); }  .dashconfigpanel > div {     display:inline-block;     vertical-align: middle;     /*float: left;*/ }  .dashdatetextbox {     vertical-align: top;     text-indent: 3px;     color: darkslategray; }  .radcalendarpopup {     z-index: 12000 !important; }  .layoutcolumnwithoutgrid {     /*height: 300px;*/ }  .layoutcolumnwithgrid {     /*height: 500px;*/ }