1
右側のdivを空のままにすると、重複はありません。しかし、私が左側に置いた緑色のdiv "greenhead"に単語を入力すると、が展開して、右側の白い欄にが重なってしまいます。以下は、 "greenhead" divに "fff"と入力したときに起こったことの図です。右は、緑色のdivを空のままにした場合の動作です。 3列にページを分割マスターページの単語を入力するとdivが他のdivと重なってしまうのはなぜですか？
........... 
のCSSコード。マスターページでの3つの列の
.col1
{
width:20%;
float: left;
}
.col2
{
width:50%;
float: left;
}
.col3{
width:0%;
float: left;
}
.row1{
content: "";
display: table;
clear: both;
}
のHTMLコードを：（私はメインの.aspxページ自体にこれらをコーディングすることはできませんので、私は、SharePointを使用しています）。図に示すように青色の&の緑色のブロックは第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-->