Basically in my CSS my boxes are overlapping. My website needs to be web reponsive and when I shrink the browser window down the boxes start overlapping. I don;t really know how to fix it and I need help please.
Code: (the two boxes that are overlapping are content-box1 and content-left)
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
font-size:12px;
background: #394BA0;
color:#C180E4;
border-color:#88C6ED;

}
#wrapper {
width:62.7%;
margin:0px auto;
border:1px solid #bbb;
padding:10px;
height: 1199px;
position: abosulte;
}
#header{
border:1px solid #bbb;
height:100px;
padding:10px;
}
#content-left {
width: 20%;
height: 30%;
border:1px solid #bbb;
margin-top: 15%;
position: absolute;
}
#content-main {
position: absolute;
}
#content-box1 {
width: 20%;
height: 26%;
border:1px solid #bbb;
margin-top: 1%;
position: absolute;
}
#content-box2 {
width: 20%;
height: 26%;
border:1px solid #bbb;
margin-top: 1%;
margin-left:21%;
position: absolute;
}
#content-box3 {
width: 20%;
height: 26%;
border:1px solid #bbb;
margin-top: 1%;
margin-left:42%;
position: absolute;
}
#bottom {
width: 27%;
height: 27%;
border:1px solid #bbb;
position: absolute;
margin-top: 100%;
}