Wenn ich meine rechte Seite divs leer lasse, gibt es keine Überlappung. Wenn ich jedoch Wörter in mein grün gefärbtes div "greenhead" tippe, das ich auf der linken Seite platziert habe, wird es expandiert und überlappt durch das weiße div auf der rechten Seite. Unten ist ein Diagramm von dem, was passiert ist, als ich "fff" in das "greenhead" Div eingegeben habe. Auf der rechten Seite passiert, was passiert, wenn ich das grüne div leer lasse.Warum div wird von anderen divs überlappt, wenn ich Wörter hineinsetze?
........... 
Css-Codes für die Master-Seite, die die Seite in 3 Spalten unterteilt. (Ich verwende Sharepoint so kann ich nicht diese auf die Haupt ASPX-Seite Code selbst):
.col1
{
width:20%;
float: left;
}
.col2
{
width:50%;
float: left;
}
.col3{
width:0%;
float: left;
}
.row1{
content: "";
display: table;
clear: both;
}
HTML-Codes für die 3 Spalten in Masterpage. Wie in der Grafik gezeigt, gehören die blauen & grünen Blöcke zur 1. Spalte, während das weiße Div zur 2. Spalte gehört. 3. Spalte ist in dem Diagramm nicht gezeigt:
<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 auf der Hauptseite selbst:
<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 auf der Hauptseite:
<ul id="rounded-border"></ul>
<!--blue block-->
<br/>
<div class="greenhead">
<!--green block--> fff
</div>
<!--white div is an sharepoint image carousel-->