Help Needed: Overlapping Boxes in Responsive Design
I am facing a problem with my CSS where the boxes on my website are overlapping when I shrink the browser window. The issue occurs as I resize the window, causing the boxes to overlap more and more. I have tried various solutions but cannot seem to fix it. The specific boxes that are overlapping are content-box1 and content-left.
Code:</p>
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: absoulte;
margin-top: 100%;
}