In Firefox, negative margins do not have the effect of pulling up floated siblings

Question

In Firefox, negative margins do not have the effect of pulling up floated siblings

I am facing an issue with a box that contains a heading and two sibling boxes. The heading has negative margin-top to render outside the box. Surprisingly, in all browsers except Firefox, the heading successfully pulls up its sibling boxes, but in Firefox, the boxes remain in their original position.

Upon removing the float property from the boxes, they do move up as expected. Is there a solution for this problem aside from giving the boxes a negative margin-top?

div {
  background: red;
  padding: 2rem;
  margin-top: 8rem;
  box-sizing: border-box;
}

div:after {
  display: table;
  content: "";
  clear: both;
}

div div {
  background: green;
  margin: 0 0 2rem;
  width: 45%;
  float: left; /* Remove this and use float: right below to make it work on FF */
}

div div + div {
  float: right;
}

h2 {
  margin-top: -8rem;
}

<div>
<h2>
Hello
</h2>
<div>
These sibling boxes also appear outside the red box.
</div>
<div>
Except in Firefox.
</div>
</div>

html css firefox css-float margins

Answer 1

Answer №1

To prevent floated boxes from overlapping, consider placing them within a separate container that is not floated. (note: Each div has been assigned its own class for clarity on which styles are being applied to each div.)

.d1 {background:red; padding:2rem; margin-top:8rem; box-sizing:border-box;}
.d1:after {display:table; content:""; clear:both;}
.d3 {float:left; background:green; padding:2rem; box-sizing:border-box; width:45%;}
.d3 + .d3 {float:right;}
h2 {margin-top:-8rem;}

<div class="d1">
    <h2>Hello</h2>
    <div class="d2">
        <div class="d3">These boxes render outside the red one.</div>
        <div class="d3">In every browser.</div>
    </div>
</div>

Answer 2

To prevent floated boxes from overlapping, consider placing them within a separate container that is not floated. (note: Each div has been assigned its own class for clarity on which styles are being applied to each div.)

.d1 {background:red; padding:2rem; margin-top:8rem; box-sizing:border-box;}
.d1:after {display:table; content:""; clear:both;}
.d3 {float:left; background:green; padding:2rem; box-sizing:border-box; width:45%;}
.d3 + .d3 {float:right;}
h2 {margin-top:-8rem;}

<div class="d1">
    <h2>Hello</h2>
    <div class="d2">
        <div class="d3">These boxes render outside the red one.</div>
        <div class="d3">In every browser.</div>
    </div>
</div>

Answer 3

Answer №2

Initially, I condensed the code into a more minimal example as shown below:

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.wrapper {
  background: red;
  padding: 2rem;
  margin-top: 8rem;
}
.wrapper > div {
  background: green;
  padding: 2rem;
  float:left;
}
.wrapper:after{
  content: '';
  clear:both;
  display: table;
}
h2 {
  margin-top: -8rem;
}

<div class="wrapper">
  <h2>Hello</h2>
  <div>These boxes also render outside the red one.</div>
</div>

What is causing this?

The first step was to remove the padding from wrapper to observe how margin collapsing affects the layout, which revealed that the behavior remained consistent across browsers (Firefox included). This indicates that margin collapsing is not the cause in this scenario.

    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
    }
    .wrapper {
      background: red;
      margin-top: 8rem;
    }
    .wrapper > div {
      background: green;
      padding: 2rem;
      float:left;
    }
    .wrapper:after{
      content: '';
      clear:both;
      display: table;
    }
    h2 {
      margin-top: -8rem;
    }

    <div class="wrapper">
      <h2>Hello</h2>
      <div>These boxes also render outside the red one.</div>
    </div>

Subsequently, toggling the float: left property for the inner div within wrapper exposed issues with negative margins specifically in Firefox.

    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
    }
    .wrapper {
      background: red;
      padding: 2rem;
      margin-top: 8rem;
    }
    .wrapper > div {
      background: green;
      padding: 2rem;
    }
    .wrapper:after{
      content: '';
      clear:both;
      display: table;
    }
    h2 {
      margin-top: -8rem;
    }

    <div class="wrapper">
      <h2>Hello</h2>
      <div>These boxes also render outside the red one.</div>
    </div>

Is this a bug?

According to the documentation:

Negative values for margin properties are allowed, but there may be implementation-specific limits.(Source: W3C)

Furthermore, it appears that Firefox has an unresolved historic issue related to this - check out this Bugzilla link.

Solution

Avoid using floated siblings within containers with negative margins:

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.wrapper {
  background: red;
  padding: 2rem;
  margin-top: 8rem;
}
.wrapper > .float-wrap > div {
  background: green;
  padding: 2rem;
  float:left;
}
.wrapper > .float-wrap:after{
  content: '';
  clear:both;
  display: table;
}
h2 {
  margin-top: -8rem;
}

<div class="wrapper">
  <h2>Hello</h2>
  <div class="float-wrap">
    <div>These boxes also render outside the red one.</div>
  </div>
</div>

In summary, encapsulate the floated container within your code with the following modifications:

div {
  background: red;
  padding: 2rem;
  margin-top: 8rem;
  box-sizing: border-box;
}
div:after {
  display: table;
  content: "";
  clear: both;
}
div > div > div {
  background: green;
  margin: 0 0 2rem;
  width: 45%;
  float: left;
}
div > div > div + div {
  float: right;
}
h2 {
  margin-top: -8rem;
}
div > h2 + div {
  padding: 0;
  margin: 0;
  background: none;
}

<div>
  <h2>Hello</h2>
  <div>
    <div>
      These boxes also render outside the red one.
    </div>
    <div>
      In every browser except Firefox.
    </div>
  </div>
</div>

Answer 4

Initially, I condensed the code into a more minimal example as shown below:

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.wrapper {
  background: red;
  padding: 2rem;
  margin-top: 8rem;
}
.wrapper > div {
  background: green;
  padding: 2rem;
  float:left;
}
.wrapper:after{
  content: '';
  clear:both;
  display: table;
}
h2 {
  margin-top: -8rem;
}

<div class="wrapper">
  <h2>Hello</h2>
  <div>These boxes also render outside the red one.</div>
</div>

What is causing this?

The first step was to remove the padding from wrapper to observe how margin collapsing affects the layout, which revealed that the behavior remained consistent across browsers (Firefox included). This indicates that margin collapsing is not the cause in this scenario.

    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
    }
    .wrapper {
      background: red;
      margin-top: 8rem;
    }
    .wrapper > div {
      background: green;
      padding: 2rem;
      float:left;
    }
    .wrapper:after{
      content: '';
      clear:both;
      display: table;
    }
    h2 {
      margin-top: -8rem;
    }

    <div class="wrapper">
      <h2>Hello</h2>
      <div>These boxes also render outside the red one.</div>
    </div>

Subsequently, toggling the float: left property for the inner div within wrapper exposed issues with negative margins specifically in Firefox.

    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
    }
    .wrapper {
      background: red;
      padding: 2rem;
      margin-top: 8rem;
    }
    .wrapper > div {
      background: green;
      padding: 2rem;
    }
    .wrapper:after{
      content: '';
      clear:both;
      display: table;
    }
    h2 {
      margin-top: -8rem;
    }

    <div class="wrapper">
      <h2>Hello</h2>
      <div>These boxes also render outside the red one.</div>
    </div>

Is this a bug?

According to the documentation:

Negative values for margin properties are allowed, but there may be implementation-specific limits.(Source: W3C)

Furthermore, it appears that Firefox has an unresolved historic issue related to this - check out this Bugzilla link.

Solution

Avoid using floated siblings within containers with negative margins:

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
.wrapper {
  background: red;
  padding: 2rem;
  margin-top: 8rem;
}
.wrapper > .float-wrap > div {
  background: green;
  padding: 2rem;
  float:left;
}
.wrapper > .float-wrap:after{
  content: '';
  clear:both;
  display: table;
}
h2 {
  margin-top: -8rem;
}

<div class="wrapper">
  <h2>Hello</h2>
  <div class="float-wrap">
    <div>These boxes also render outside the red one.</div>
  </div>
</div>

In summary, encapsulate the floated container within your code with the following modifications:

div {
  background: red;
  padding: 2rem;
  margin-top: 8rem;
  box-sizing: border-box;
}
div:after {
  display: table;
  content: "";
  clear: both;
}
div > div > div {
  background: green;
  margin: 0 0 2rem;
  width: 45%;
  float: left;
}
div > div > div + div {
  float: right;
}
h2 {
  margin-top: -8rem;
}
div > h2 + div {
  padding: 0;
  margin: 0;
  background: none;
}

<div>
  <h2>Hello</h2>
  <div>
    <div>
      These boxes also render outside the red one.
    </div>
    <div>
      In every browser except Firefox.
    </div>
  </div>
</div>

Answer 5

Answer №3

It could be argued that a potential bug exists in all browsers except for Firefox.

According to the Working Draft Collapsing Margin Spec:

Margins of a floated box do not collapse with any other margins.

If a box is collapsed through and it has clearance applied to one of the collapsed margins, then those margins do not collapse with certain of the parent's margins: If clearance is applied to, respectively, the top, right or left margin, then those margins do not collapse with the parent's bottom, left or right margin, respectively.

It seems that most browsers, with the exception of Firefox, are incorrectly allowing the floated div margins to collapse. However, setting a clear property to the div div css will keep the floats within their container (Refer to the snippet below). This aligns more closely with the specifications provided.

The Recommendation for positioning of floats also suggests that what is observed in other browsers may not be the intended outcome. The Spec recommendation implies that floated items should generally remain within their parent container unless explicitly stated otherwise.

A floating box's outer top may not be higher than the top of its containing block.

Check out the demonstration below which shows that adding clearing to the floats will contain them within their parent

div {
  background: red;
  padding: 2rem;
  margin-top: 8rem;
  box-sizing: border-box;
}

div:after {
  display: table;
  content: "";
  clear: both;
}

div div {
  background: green;
  margin: 0 0 2rem;
  width: 45%;
  float: left;
  clear:right; // By including this, the floats remain inside their container
}

div div + div {
  float: right;
}

h2 {
  margin-top: -8rem;
}

<div>
<h2>
Hello
</h2>
<div>
These boxes also render outside the red one.
</div>
<div>
In every browser except Firefox.
</div>
</div>

Answer 6

It could be argued that a potential bug exists in all browsers except for Firefox.

According to the Working Draft Collapsing Margin Spec:

Margins of a floated box do not collapse with any other margins.

If a box is collapsed through and it has clearance applied to one of the collapsed margins, then those margins do not collapse with certain of the parent's margins: If clearance is applied to, respectively, the top, right or left margin, then those margins do not collapse with the parent's bottom, left or right margin, respectively.

It seems that most browsers, with the exception of Firefox, are incorrectly allowing the floated div margins to collapse. However, setting a clear property to the div div css will keep the floats within their container (Refer to the snippet below). This aligns more closely with the specifications provided.

The Recommendation for positioning of floats also suggests that what is observed in other browsers may not be the intended outcome. The Spec recommendation implies that floated items should generally remain within their parent container unless explicitly stated otherwise.

A floating box's outer top may not be higher than the top of its containing block.

Check out the demonstration below which shows that adding clearing to the floats will contain them within their parent

div {
  background: red;
  padding: 2rem;
  margin-top: 8rem;
  box-sizing: border-box;
}

div:after {
  display: table;
  content: "";
  clear: both;
}

div div {
  background: green;
  margin: 0 0 2rem;
  width: 45%;
  float: left;
  clear:right; // By including this, the floats remain inside their container
}

div div + div {
  float: right;
}

h2 {
  margin-top: -8rem;
}

<div>
<h2>
Hello
</h2>
<div>
These boxes also render outside the red one.
</div>
<div>
In every browser except Firefox.
</div>
</div>

Answer 7

Answer №4

The way block structure is calculated in a browser can determine the outcome. I managed to fix it by substituting margin-top with top and adjusting the position property.

div {
  background: red;
  padding: 2rem;
  margin-top: 8rem;
  box-sizing: border-box;
}

div:after {
  display: table;
  content: "";
  clear: both;
}

div div {
  position: relative;
  top: -12rem;
  background: green;
  width: 45%;
  float: left;
  /* Removing this line and using float: right below makes it work in FF */
}

div div + div {
  float: right;
}

h2 {
  margin-top: -8rem;
  position: absolute;
}

Check out the working fiddle here: https://jsfiddle.net/nobalmohan/6sjhy1q3/

I'm confident there are alternative solutions to tackle this issue as well.

Answer 8

The way block structure is calculated in a browser can determine the outcome. I managed to fix it by substituting margin-top with top and adjusting the position property.

div {
  background: red;
  padding: 2rem;
  margin-top: 8rem;
  box-sizing: border-box;
}

div:after {
  display: table;
  content: "";
  clear: both;
}

div div {
  position: relative;
  top: -12rem;
  background: green;
  width: 45%;
  float: left;
  /* Removing this line and using float: right below makes it work in FF */
}

div div + div {
  float: right;
}

h2 {
  margin-top: -8rem;
  position: absolute;
}

Check out the working fiddle here: https://jsfiddle.net/nobalmohan/6sjhy1q3/

I'm confident there are alternative solutions to tackle this issue as well.

In Firefox, negative margins do not have the effect of pulling up floated siblings

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to use a HTML link to toggle the visibility of a <p> element using

Struggling to Collaborate with External PHP File Leads to Garbled Results

ColorBox refuses to adjust width dynamically

What could be causing the issue with loading data into my MongoDB collection?

Jade: modify the text box input to show = " ..."

Utilizing jQuery to display labels only for selected checkboxes while concealing the ones that are not checked

Enhancing HTML "range" element with mouse scroll functionality for incrementing values in step increments

Is there a way to use prettier to format HTML codes without breaking up the tags?

Adjust the width of a jQuery Mobile control group

AngularJS: resolving route dependencies

Incorporating OTP verification into the registration process

Ways to position an image in the middle of a Div

`When utilizing $routeParams, the CSS fails to load`

Looking to utilize AngularJS validation in place of the default browser validation?

Illustration tucked beneath the menu

Tips on concealing the visibility of a table row using PHP

When table cells are added dynamically, they are not encompassed by the solid fixed title bar when scrolling

Jquery scroll animation not reaching the intended position when scrolling upwards

What is the best way to select an ID element using JQuery?

Is it possible to save the current state of an execution in JavaScript and pick up where you left off