0

Sorry for the bad title but I'm not sure what is going on here so I'm keeping the title open.

I have a quite simple markup with a div positioned at the bottom right corner of its container:

<div class="container mod">
  <p>Content</p>
  <p>More content</p>
  <div class="inner mod">
    <p class="no-margin">Bottom right content</p>
  </div>
</div>
<p>Next element outside of container</p>

With accompanying CSS:

p {
  margin-bottom: 2em;
}

.container {
  width: 500px;
  background-color: #eee;
  position: relative;
}

.no-margin {
  margin: 0;
}

.mod {
  outline: 1px solid #f00;
}

.inner {
  position: absolute; 
  bottom: 0;
  right: 0;
}

(see codepen)

In Chrome it is displayed correctly (according to what I want it to look like), the bottom positioned div is displayed at the bottom, while in FF the div is displayed more up (due to the margin-bottom of the containers' paragraph "margin-bottom").

What is causing this different behavior and what can I do to make this be displayed in the same way across browsers? To change outline to border is not a possibility.

enter image description here

user1823799
  • 120
  • 7
  • For anyone finding my question interesting... the answer can be found in this thread: http://stackoverflow.com/questions/10662902/css-outline-different-behavior-behavior-on-webkit-gecko – user1823799 Aug 18 '15 at 11:03

1 Answers1

0

Just add the .no-margin class to your second p inside .container

<div class="container mod">
  <p>Content</p>
  <p class="no-margin">More content</p>
  <div class="inner mod">
    <p class="no-margin">Bottom right content</p>
  </div>
</div>
<p>Next element outside of container</p>
Vlad
  • 902
  • 4
  • 14
  • Thanks, but this is used in a CMS used by a couple of 100 people. The solution needs to be more general. – user1823799 May 29 '15 at 11:18
  • @user1823799 : How specific? If you want to fix this maybe you need to refactor your HTML. How about this http://codepen.io/pacMakaveli/pen/aOpBxV ? – Vlad May 29 '15 at 11:29
  • You're obviously going to have issues once you start adding more `p` tags and such. – Vlad May 29 '15 at 11:29
  • Hi Vlad and thank you for your effort. I have no control of the HTML output other than in the .inner.mod. The other p elements is just an example but it's actually the output of the CMS user. It may contain any html, not just p, and hence the solution must be more general. I would like to know which of the browsers is not handling this according to the standard and what can I do about it causing the least maintenance work. – user1823799 May 29 '15 at 11:59