'Negative margin-right with left floats in the parent container

Learning CSS basics and was doing layouts with floats. I know CSS Grid and Flexbox are best practice and I intend to learn them, but wanted to understand the basics of floats before I move on.

body {
  margin: 0px;
  padding: 0px;
}

.wrapper {
  width: 600px;
  padding-left: 200px;
  padding-right: 200px;
  overflow: hidden;
}

.col-main {
  float: left;
  width: 100%;
}

.col-left {
  position: relative;
  float: left;
  width: 200px;
  margin-left: -100%;
  right: 200px;
}

.col-right {
  float: left;
  width: 125px;
  margin-right: -125px;
}
<body>
  <div class="wrapper">
    <div class="col-main">Main Content</div>
    <div class="col-left">Left Content</div>
    <div class="col-right">Right Content</div>
  </div>
</body>

On an intuitive level I understand how .col-left works. margin-left: -100%; represents 600px width of the parent element placing it along side .col-main and position: relative; combined with right: 200px; puts it flush within the reserved left padding of the parent element. In fact, it doesn't have to be -100% it can be -200% if you like and push .col-left completely off the screen.

However, I cannot grasp how .col-right works. Having a negative value in margin-right that's equal to the absolute value in width places the .col-right on the same line, neatly sticking out on the right side of the parent element. It's great but I don't understand how or why. What's more, is that if you change margin-right to -200px or heck even -1000px it will still be in the same position. Why?

htmlcsscss-floatmarginmargin-left


Solution 1:[1]

Float's meaning is basically floating :). You can insert value How much you want. But in the end it floats to right. Because wrapper's width not enough to changing to your see. if you add more width to wrapper and specify scalable value to .col-main (like 50px). You can see more understandable. Because .col-right is in over .col-main. like z-index shits

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Kaan Kuscu

Related Questions