div从容器溢出

Question

I'm working on an application and trying to design the User Interface. Having issues getting things going. The divs contains in my main view are extending past their container.

This is most of the code: http://jsfiddle.net/9t3sn/

<div id="mainView">
    <div id="top">
        <div><label>Entity <select id="entityDropDown" ></select></label></div>
        <div id="removeEntity" class=""><a onclick="">&#10006;</a></div>
        <div><label>Entity Available <select id="entityAvailable" multiple></select></label></div>
        <div><label>Entity Assigned <select id="entityAssigned" multiple></select></label></div>
    </div>

    <div id="middle">
        <div id="entityInfo">
            <label>placeholder: <input type="text" id="domainID" disabled="true"/></label></br>
            <label>placeholder: <input type="text" id="entityName" /></label></br>
            <label>placeholder: <input type="text" id="userEmail" /></label></br>
            <label>Description: <textarea id="groupDesc" rows='3' cols="25"></textarea></label></br>
            <label>Group Templates: <select id="groupTemplates"></label></select></br>
        </div>
    </div>

    <div id="bottom">
        <div id="updateEntity" class=""><a>Update Entity Info</a></div>
    </div>
</div>

CSS:

#mdContainer{
    position: relative;
    border: 2px solid red;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0;
    box-sizing: border-box;
    -moz-box-sizing:border-box;
}
#mainView{
    position: relative;
    top: 0;
    bottom: 0;
    background: green;
    color: black;
    left: 140px;
    right: 0;
    padding-left: 0px;
}

#mdContainer #top,#mdContainer #middle,#mdContainer #bottom{
    height: auto;
    width: 100%;
    padding: 5px;

}

Answer 1

Remove width from #mdContainer #top, #mdContainer #middle, #mdContainer #bottom class. and set margin-left instead of left to the #mainView .

 #mainView {
 position: relative;
 top: 0;
 bottom: 0;
 background: green;
 color: black;
 margin-left: 140px;
 right: 0;
 padding-left: 0px;
 }

#mdContainer #top, #mdContainer #middle, #mdContainer #bottom {
height: auto;
padding: 5px;
}

The reason is, div's are 100% width by default until you positioned, if you add width and padding, it will calculate as 100% of the container + 10px width