How does negative margin works? - html

Question

From this article(https://www.quirksmode.org/blog/archives/2020/02/negative_margin.html) I know that negative margin-right influences any element to the right of the element where it's written but not an element itself.
In the book, "Meloni J. - PHP, MySQL & JavaScript All in One (6th Edition) (Sams Teach Yourself) - 2018" there is an example where I don't see any element to the right. But it still works and it pulls the element somehow. Can somebody explain me how does it work? Why it influences the element where it's written?
body {
margin: 0;
padding: 0;
}
#wrapper {
float: left;
padding-left: 200px;
padding-right: 125px;
}
#left_side {
position: relative;
float: left;
width: 200px;
background-color: #52f471;
right: 200px;
margin-left: -100%;
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #f452d5;
margin-right: -125px; /* THIS MARGIN-RIGHT */
}
#content_area {
position: relative;
float: left;
background-color: #FFFFFF;
width: 100%;
}
<div id="wrapper">
<div id="content_area">CONTENT</div>
<div id="left_side">LEFT SIDE</div>
<div id="right_side">RIGHT SIDE</div>
</div>

Answer 1

Remove some of the properties to better understand what is happening initially
body {
margin: 0;
padding: 0;
width:800px;
}
#wrapper {
float: left;
padding-left: 200px;
padding-right: 125px;
border:1px solid red;
}
#left_side {
position: relative;
float: left;
width: 200px;
background-color: #52f471;
/*right: 200px;
margin-left: -100%;*/
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #f452d5;
/*margin-right: -125px;*/ /* THIS MARGIN-RIGHT */
}
#content_area {
position: relative;
float: left;
background-color: #FFFFFF;
/*width: 100%;*/
}
<div id="wrapper">
<div id="content_area">CONTENT</div>
<div id="left_side">LEFT SIDE</div>
<div id="right_side">RIGHT SIDE</div>
</div>
We have 3 float elements side by side. One with auto width and two with explicit width. The total width will define the width of the wrapper W.
Now if we add width:100% to #content_area it will take 100% of W push the other to the next row:
body {
margin: 0;
padding: 0;
width:800px;
}
#wrapper {
float: left;
padding-left: 200px;
padding-right: 125px;
border:1px solid red;
}
#left_side {
position: relative;
float: left;
width: 200px;
background-color: #52f471;
/*right: 200px;
margin-left: -100%;*/
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #f452d5;
/*margin-right: -125px;*/ /* THIS MARGIN-RIGHT */
}
#content_area {
position: relative;
float: left;
background-color: #FFFFFF;
width: 100%;
}
<div id="wrapper">
<div id="content_area">CONTENT</div>
<div id="left_side">LEFT SIDE</div>
<div id="right_side">RIGHT SIDE</div>
</div>
Now if you add margin-left:-100% to the left element it means shift this element by -W thus it will overlap the #content_area element
body {
margin: 0;
padding: 0;
width:800px;
}
#wrapper {
float: left;
padding-left: 200px;
padding-right: 125px;
border:1px solid red;
}
#left_side {
position: relative;
float: left;
width: 200px;
background-color: #52f471;
/*right: 200px;*/
margin-left: -100%;
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #f452d5;
/*margin-right: -125px;*/ /* THIS MARGIN-RIGHT */
}
#content_area {
position: relative;
float: left;
background-color: #FFFFFF;
width: 100%;
}
<div id="wrapper">
<div id="content_area">CONTENT</div>
<div id="left_side">LEFT SIDE</div>
<div id="right_side">RIGHT SIDE</div>
</div>
Then we shift it using right equal to its width to remove the overlap and make it on the top of the right padding:
body {
margin: 0;
padding: 0;
width:800px;
}
#wrapper {
float: left;
padding-left: 200px;
padding-right: 125px;
border:1px solid red;
}
#left_side {
position: relative;
float: left;
width: 200px;
background-color: #52f471;
right: 200px;
margin-left: -100%;
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #f452d5;
/*margin-right: -125px;*/ /* THIS MARGIN-RIGHT */
}
#content_area {
position: relative;
float: left;
background-color: #FFFFFF;
width: 100%;
}
<div id="wrapper">
<div id="content_area">CONTENT</div>
<div id="left_side">LEFT SIDE</div>
<div id="right_side">RIGHT SIDE</div>
</div>
For the right element it's almost the same trick but the negative margin-right which is equal to the width will negate the width effect making the element taking 0 space on the layout so it will move back to the first row and will overlap the padding area on the right.
Here is an illustration of the right element alone to better understand:
body {
margin: 0;
padding: 0;
}
#wrapper {
float: left;
border:2px solid green;
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #f452d5;
margin-right: -125px;
animation:change 5s linear infinite alternate;
}
#keyframes change{
from {
margin-right:0;
}
}
<div id="wrapper">
<div id="right_side">RIGHT SIDE</div>
</div>
Notice how the width of wrapper become 0 when width+margin of the right element is 0
And if we add another element inside you will see the jump to the first row:
body {
margin: 0;
padding: 0;
}
#wrapper {
float: left;
border:2px solid green;
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #f452d5;
margin-right: -125px;
animation:change 5s linear infinite alternate;
}
#keyframes change{
0% {
margin-right:0;
}
90% {
margin-right:-125px;
}
}
<div id="wrapper">
<div style="float:left;width:100%">aaa</div>
<div id="right_side">RIGHT SIDE</div>
</div>
And if you add padding-right we make the right element overlap that padding when it jumps to the first row
body {
margin: 0;
padding: 0;
}
#wrapper {
float: left;
border:2px solid green;
padding-right:125px;
background:linear-gradient(yellow,yellow) right/125px no-repeat; /* to illustrate the padding */
}
#right_side {
position: relative;
float: left;
width: 125px;
background-color: #f452d5;
margin-right: -125px;
animation:change 5s linear infinite alternate;
}
#keyframes change{
0% {
margin-right:0;
}
90% {
margin-right:-125px;
}
}
<div id="wrapper">
<div style="float:left;width:100%">aaa</div>
<div id="right_side">RIGHT SIDE</div>
</div>