CODEWITHSUNDEEP
htmlcss
freedeebee
freedeebee

Reputation: 21

Shifted overflowing div Mozilla Firefox Margin

I want to code a shifted div as here:

https://codepen.io/anon/pen/VQQdaL

Relevant css:

.wrap {
    display: flex;
    margin: 0 auto;
    max-width: 1000px;
    width: 100%;
}

.box {
    position: relative;
    flex-shrink: 0;
    background: #fff;
    margin-bottom: 5%;
    width: 50%;
}

.image {
    flex-shrink: 0;
    margin-top: 5%;
    margin-left: -5%;
    width: 55%;
    background: linear-gradient(135deg, #fed2db, #212353);
}

this works for me just fine in Chrome/Safari but not in Firefox. Is there something I am missing?

This is what it should look like:

Shifted Div Chrome

This is what it looks like in Firefox:

Not Shifted Div Firefox

.section {
  background: black;
  padding: 4em 0;
}

.wrap {
  display: flex;
  margin: 0 auto;
  max-width: 1000px;
  width: 100%;
}

.box {
  position: relative;
  flex-shrink: 0;
  background: #fff;
  margin-bottom: 5%;
  width: 50%;
}

.image {
  flex-shrink: 0;
  top: 5%;
  margin-left: -5%;
  width: 55%;
  background: linear-gradient(135deg, #fed2db, #212353);
}
<div class="section">
  <div class="wrap">

    <div class="box">
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
      <br>
    </div>

    <div class="image"></div>

  </div>
</div>

Upvotes: 2

Views: 94

Answers (1)

Scott Forsythe
Scott Forsythe

Reputation: 370

The problem seems primarily due to the lack of absolute height. I couldn't produce a clean single reason for the behavior, but in the meantime, I recreated the intended result in JSFiddle. Hope this helps.

JSFiddle code:

.section {
  background: black;
  padding: 4em 0;
}

.wrap {
  display: flex;
  margin: 0 auto;
  max-width: 1000px;
  width: 100%;
}

.box {
  position: absolute;
  height: 100px;
  flex-shrink: 0;
  background: blue;
  margin-bottom: 5%;
  width: 50%;
}

.image {
  position: relative;
  height: 100px;
  flex-shrink: 0;
  background: green;
  margin-top: 20px;
  margin-left: 45%;
  width: 55%;
  background: linear-gradient(135deg, #fed2db, #212353);
}
<div class="section">
  <div class="wrap">

    <div class="box">
      <br>
      <br>
      <br>
      <br>
      <br>
    </div>

    <div class="image"></div>

  </div>
</div>

Upvotes: 1

Related Questions