当我输入单词时，为什么div会被其他div重叠？

Question

当我离开我的右侧div空时，没有重叠。然而，当我在我放置在左侧的绿色div“greenhead”中输入单词时，它会扩展并与右侧的白色div重叠。下面是我在“greenhead”div中键入“fff”时发生的情况图。在右边是如果我将绿色div留空的情况会发生什么。

...........

母版页的Css代码，用于将页面分为3列。（我正在使用sharepoint所以我无法将这些代码编写到主.aspx页面本身）：

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

}

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

}

.col3{

    width:0%;
    float: left;

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

母版页中3列的html代码。如图所示，蓝色和绿色块属于第1列，而白色div属于第2列。第3列未显示在图中：

<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>

主页面上的内联CSS代码：

<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代码：

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


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

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