0

When a static element is given a negative margin on the top/left, it pulls the element in that specified direction. 

div.box{
    height:260px;
    width:400px;    
    border:1px solid black;
}
div.left{
    float:left;
    height:30px;
    width:400px;
    border:1px solid red;
} 

div.right{
    float:left;
    height:30px;
    width:400px;
    border:4px solid green;
    margin-left:-300px;
    text-align:right;
}
<div class="box">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

enter image description here

1.div.left and div.right are in different space.
2.div.right was put left with 300px width.

Now to change the margin-left in css of div.right into -600px. 

div.box{
    height:260px;
    width:400px;    
    border:1px solid black;
}
div.left{
    float:left;
    height:30px;
    width:400px;
    border:1px solid red;
} 

div.right{
    float:left;
    height:30px;
    width:400px;
    border:4px solid green;
    margin-left:-600px;
    text-align:right;
}
<div class="box">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

enter image description here

Why div.right and div.left overlap each other when negative margin enlarge into 600px?
What result in this appearance？
How negative margin width affect float ?

showkey
  • 482
  • 42
  • 140
  • 295
  • There is a similar question here - https://stackoverflow.com/questions/11495200/how-do-negative-margins-in-css-work-and-why-is-margin-top-5-margin-bottom5 – AutoTester213 May 23 '17 at 11:43
  • By having -600px, it is wider than the container so this means that it will be now placed before the first element as that is also floating. As it is now onto the first line (that is 400px worth of the margin), it is then further margined an extra 200px. By margining it less than the container width, you do not do enough to move it before the first element and therefore it goes out of the box where it is – Pete May 23 '17 at 11:48

0 Answers0