When resizing the browser, I'm having trouble keeping the div boxes in place. The bottom-right lower div (vd-grid-sub-box) keeps shifting away when I slightly decrease the browser size. Additionally, vd-grid-right-col overlaps with the banner if the size is reduced even further.
I've spent numerous hours trying to figure this out and I'm at a loss. As a beginner, I would appreciate a clear explanation of what needs to be done. This issue arose when I switched the website from static to fluid, requiring me to change all pixels to percentages. Could I have made a mistake in doing so?
<!doctype html>
<html>
...
The CSS section causing issues:
.vd-grid {
width: 98.6%;
margin:13px auto;
}
.vd-grid-left-col {
width: 77.6%;
float:left;
}
.vd-grid-right-col {
width: 17.8%;
float:left;
}
.vd-grid-main-box {
width: 93.5%;
height: 460px;
background-color: #000029;
padding: 20px 30px;
}
.vd-grid-main-box img {
width:100%;
height:auto;
position:absolute;
}
.vd-grid-sub-box {
width: 27.3%;
height:146px;
background-image:url(../img/granda_hj.jpg);
background-size:cover;
background-position:top center;
background-color:#000029;
float:left;
padding: 15px 25px;
margin:0 0 15px 0;
}
.vd-grid-xtra-box {
width:225px;
height:318px;
background-image:url(../img/tst_img.jpg);
background-size:cover;
background-position:center center;
background-color:#000029;
padding: 10px 20px;
...