When a web page has many div,how to avoid these divs to affect each other?

See more:

CSS

HTML

CSS3

HTML5

When a web page has many div,When I set the last div that over-flow='scroll',it seems weird that the div before will change location!!How to advoid these effect?

 <div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',split:true" title="items" style="width: 220px;">
        <div id="ttleft" class="easyui-tabs">
            <div title="item1" style="padding: 10px">
              div1
            </div>
            <div title="item2">
             div2
            </div>
        </div>
    </div>
    <div data-options="region:'center',title:'Result'">
        <div>
            <input class="easyui-datetimebox" required style="width: 150px" />
            <a href="#" class="easyui-linkbutton">Search</a>
        </div>
        <div>
            <table class="easyui-datagrid" data-options="singleSelect:true,fit:true,fitColumns:true"
               pagination="true">
                <thead data-options="frozen:true">
                    <tr>
                        <th data-options="field:'a1'">a1</th>
                       <th data-options="field:'a2'">a2</th>
                    <th data-options="field:'a3'">a3</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

when I add the overflow:scroll to the div's table,it affect the before,here is the picture:
https://www.yousendit.com/download/UVJocHBEays1aWI1SE1UQw