I am facing an issue with styling elements in my HTML code. I have a div with the ID of #left that is absolutely positioned, along with two other divs on the right side. Strangely, when I apply margin to the #top div on the right side, it also affects the #left div. I understand that margin collapsing may be the cause, but does this behavior extend to elements with position:absolute as well?
The code itself is quite simple and straightforward, yet I cannot seem to pinpoint the solution.
* {
padding:0;
margin:0;
}
#wrapper {
width:400px;
height:400px;
background:gray;
position:relative;
margin-left:100px;
}
#left {
background:pink;
width:100px;
height:100%;
left:-100px;
top:0;
position:absolute;
}
#right {
background:red;
}
#top {
background:green;
height:26px;
}
<div id="wrapper">
<div id="left">Left</div>
<div id="top">top</div>
<div id="right">Right</div>
</div>
Jsfiddle: http://jsfiddle.net/9thvLfe0/2/