Geek Answers Handbook

Make divs remain inside the parent div with fields

I searched around to fix this, I did not see a good answer, why this is happening and how I can fix it. basically I have a div that I set to 100% width and height, inside I have a tab section, like on a braiser, I added a margin and an addition to the main area, and when I set the div tabs to full width, from which then pixels, what is the correct way to deal with child divs sticking out of parent divs when playing with% and fields / padding

<div class="appview_fullscreen app_ama">
 <center><strong>AMAMAMAMAMAMA</strong> </br>
    <i>AMAMAMA</i>
 </center>
<div class="main_area">
    <div class="tabs_area">

    </div>
    <div class="main_window">

    </div>
    <div class="troubleshoot_area">

    </div>
    <div class="timeline">

    </div>
 </div>
</div>


.appview_fullscreen
{
    width: 100% !important;
    height: 100%;
    background-color: black;
    color: white;
    font-size: 20px;
    margin: 0px;
}
.app_ama
{

}
.main_area
{
    border: 1px solid green;
    width: 100%;
    padding: 2px;
    margin: 0px;
}
.tabs_area
{
    border: 1px solid green;
    height: 20px;
    width: 100%;
}

demo: http://jsfiddle.net/S8RC3/

+4
source share
2 answers

Just removing 100%from the elements DIV.

Demo

.main_area{
    /* width:100%; Why? I'm a DIV! */
    border: 1px solid green;
    padding: 2px;
    margin: 0px;
}
.tabs_area{
    /* width:100%; Why? I'm a DIV! */
    border: 1px solid green;
    height: 20px;
}

DIV , .

, : </br> <br />, <br/> <br>

+7

box-sizing: border-box;.

+1

More articles:


All Articles