Pixelknight1398 Pixelknight1398 - 4 months ago 9
CSS Question

I'm having some css confusions and issues

I have some code which is causing me a few problems. It is supposed to create a basic div with a left, right, and center pane. The left pane works just fine upon loading, but then the right pane which holds the same css styling displays its children with a collapsed margin. My first question is why is the margin-top not working for the children in the right pane?

Edit: I fixed this problem by using

padding-top: 0.5px
in the css of the right pane.

And then I read a little bit about margin collapsing and decided to make the styling of the
.picHolderSide
class contain
position: absolute; top: 0; left: 0;

This caused some problems I didn't expect because I knew that the absolute positioned elements would position based on the next positioned parent which in this case would be the right pane. My next question is if someone can repeat what I did and try to tell me why it did what it did because it's difficult to explain.

And then finally I ran into the another problem which caused me to say alright lets go on stack overflow. I changed the width attribute of the
.picHolderSide
class to be
140px
instead of
100%
which cause the children in the right pane, to overlap perfectly with the children in the left pane! I'm not sure what I'm doing wrong with this but I would appreciate if anyone could help me with these 3 questions. 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>

Answer

Your #rightDivider has a colon : after width: 20%. It should be a semi-colon ;. This is causing both the width of that container to be invalid, as well as the position: absolute. This is the correct code for that ID:

#rightDivider{ background-color: rgb(60, 60, 60); height: 100%; width: 20%: position: absolute; left: 80%; top: 0; }

Tip: use the Chrome Developer Tools (F12) to inspect your code and CSS. You can see the width and position are being crossed-out by the browser.