Why div gets overlapped by other divs when I type words into it?

Question

When I leave my right side divs empty, there is no overlap. However, when I type words into my green colored div "greenhead" that I placed on the left side, it expands and get overlapped by the white div on the right. Below is a diagram of what happened when I typed "fff" into the "greenhead" div. On the right is what happens if I leave the green div empty.

...........

Css codes for the master page which divides the page into 3 columns. (I'm using sharepoint so I can't code these onto the main .aspx page itself):

.col1
{
    width:20%;
    float: left;

}

.col2
{
    width:50%;
    float: left;

}

.col3{

    width:0%;
    float: left;

}
.row1{
    content: "";
    display: table;
    clear: both;
}

Html codes for the 3 columns in masterpage. As shown in the diagram, the blue & green blocks belong to the 1st column while the white div belongs to the 2nd column. 3rd column is not shown in the diagram:

<div class="row1">
  <div class="col1" >
    <!--html codes for col1-->
  </div>
  <div class="col2">
       <!--html codes for col2-->
  </div>
  <div class="col3">
    <!--html codes for col3-->
  </div>
</div>

Inline CSS codes on the main page itself:

<style>

/*Rounded-border*/

    #rounded-border {
    border-radius: 10px;
    background: #4ca4ff;
    padding: 2px 10px 10px 10px;

    width:450%;
    height:200px;

    }
   .greenhead{


    background:#8fd500;
   padding: 2px 10px 0px 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width:450%;
    color:white;
    display:inline-block;

}   
</style>

HTML codes on the main page:

<ul  id="rounded-border"></ul>
<!--blue block-->
<br/>


<div class="greenhead">
<!--green block--> fff  
</div>

   <!--white div is an sharepoint image carousel-->

Answer 1

you have given the width 450% for .greenhead div. Therefore its overlapping. either reduce the width size of .greenhead and use style="position:relative; in the columns