I am encountering an issue with my code that is causing some difficulties. The goal is to create a basic div with left, right, and center panes. The left pane loads perfectly, but the right pane, which has the same css styling, displays its children with a collapsed margin. My main concern is why the margin-top is not functioning for the children in the right pane?
Edit: I managed to resolve this problem by utilizing padding-top: 0.5px in the css of the right pane.
After some reading on margin collapsing, I decided to adjust the styling of the .picHolderSide class to include
position: absolute; top: 0; left: 0;Furthermore, I encountered another setback which prompted me to seek assistance on stack overflow. I modified the width attribute of the .picHolderSide class to 140px from 100%, resulting in the children in the right pane overlapping perfectly with the ones in the left pane! I'm unsure where I am going wrong with this, so any help with these three questions would be greatly appreciated. Thank you in advance.
<html>
<head>
<style type = "text/css" rel = "stylesheet">
#photoSliderContainer{
height: 500px;
width: 700px;
background-color: black;
position: relative;
left: 0;
top: 0;
}
#leftDivider{
background-color: rgb(50, 50, 50);
height: 100%;
width: 20%;
position: absolute;
left: 0;
top: 0;
}
#rightDivider{
background-color: rgb(60, 60, 60);
height: 100%;
width: 20%:
position: absolute;
left: 80%;
top: 0;
}
#centerDivider{
height: 100%;
width: 60%;
background-color: rgb(70, 70, 70);
position: absolute;
left: 20%;
top: 0;
}
#bottomDivider{
position: absolute;
background-color: rgb(80, 80, 80);
height: 20%;
width: 100%;
top: 80%;
left: 0;
}
.picHolderSide{
height: 100px;
width: 100%;
background-color: rgb(90, 90, 90);
margin-top: 25px;
margin-bottom: 25px;
}
</style>
</head>
<body>
<div id = "photoSliderContainer">
<div id = "leftDivider">
<div class = "picHolderSide">
</div>
<div class = "picHolderSide">
</div>
<div class = "picHolderSide">
</div>
</div>
<div id = "centerDivider">
<div id = "bottomDivider">
</div>
</div>
<div id = "rightDivider">
<div class = "picHolderSide">
</div>
<div class = "picHolderSide">
</div>
<div class = "picHolderSide">
</div>
</div>
</div>
</body>
</html>