Playing with div

by cliftonyeo

HTML

<div>
    lalalala    
</div>    
   
<div class="div2">
    babababa    
</div> 

<div id="outer">
    yayayaya
    <div id="inside">
        papaya
    </div> 
    papapapa
</div> 

<!-- This is a div within the body tag; a block element that stacks on one another. it can be adjusted with CSS. It provides a level of organization for the site.  -->

CSS

div {
    width: 80%;
    /* relative to the page/parent */
    height: 30%;
    background: burlywood;
    color: rgb(0, 0, 180);
    padding:20px;
    border: 5px solid red;
    text-align: center;
    margin: 20px auto;
}
.div2 {
    background: orange;
}

#outer {
    /*overflow: auto;     default setting*/
    overflow-x:scroll;    /* allows scrolling */
    overflow-y:hidden;    /* prevents scrolling, and crops the overflow instead*/
}

#inside {
    background: yellow;
    border: 7px solid black;
    width: 130%;
    height: 50%;
    padding: 7px;
    margin: 5px auto;
    
}