Imagine a setup where there is a banner at the top, with 3 divs placed side by side underneath it. The interesting part is that when you scroll down, only the center and right div should move along.
#banner {
background:blue;
color:white;
position: fixed;
height:300px;
width:500px;
border-style: dotted;
}
#left {
background:blue;
color:white;
position: fixed;
top:300px;
height:300px;
width:150px;
border-style: dotted;
float:left;
}
#center {
background:red;
color:white;
top:300px;
left:150px;
height:700px;
width:150px;
border-style: dotted;
float:left;
z-index:-1;
}
#right {
background:red;
color:white;
top:300px;
left:300px;
height:300px;
width:150px;
border-style: dotted;
float:left;
z-index:-1;
}<div id="banner">
banner
</div>
<div id="left">
left
</div>
<div id="center">
center
</div>
<div id="right">
right
</div>It seems like using position: absolute or fixed on the left and banner div might be necessary here. However, setting all the properties such as left, top, height, width, and z-index could make it complex to make them fit together seamlessly across different browsers and resolutions. Is there a simpler solution to achieve this layout?
Check out my failed attempt here: https://jsfiddle.net/y71fqthf/1/.
You can notice that the boxes go under the banner, which is not desired.
Is this method of displaying a website considered bad practice in general?