I refer to the css three-column design in a book, but I have not been able to get the reason why margn-right is negative.
<!DOCTYPE HTML>
<html>
<body>
<div id ="main">
<header>header</header>
<div id="three">
<div id="two">
<nav>left</nav>
<article>middle</article>
</div>
<aside>right</aside>
</div>
<footer>footer</footer>
</div>
</body>
</html>
<style>
*{
margin:0px;
padding:0px;
}
#main{
min-height:600px;
max-height:1100px;
margin:0 auto;
background-color: blanchedalmond;
}
#three{
float:left;
width:100%;
/* background-color: aquamarine; */
}
#two{
float:left;
width:100%;
margin-right:-210px;
/* background-color: chocolate; */
}
nav{
float:left;
width:150px;
background-color:blueviolet;
padding:10px 0px;
}
article{
width:auto;
margin-left:150px;
margin-right:210px;
background-color:burlywood;
padding:10px 0px;
}
aside{
width:210px;
float:left;
background-color:greenyellow;
padding: 10px 0px;
}
footer{
clear:both;
width:100%;
}
</style>
I have been thinking about why the margin-right can be added to move the back div forward
Make the width of two smaller and change the margin-right to a positive number
In this way, we can understand the reason for displacement when margin-right is negative, because the distance to the right is -210px.
The main reason for the misunderstanding lies in the lack of understanding of the layout of negative values.