CODEWITHSUNDEEP
cssfirefoxpositionmargin
mattpilott
mattpilott

Reputation: 356

Div not filling parent when using absolute positioning and display: table

I am using a piece of code to vertically centre a div inside another div. In safari/chrome/etc (webkit) the following works:

position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
display:table;

but on firefox this does not work, why is this and how can i fix it.

P.S. I'm using the latest versions of all browsers

Please check my fiddle to see the problem in action.

http://jsfiddle.net/matt3224/prx7o1yx/

Upvotes: 1

Views: 731

Answers (1)

Harsukh Makwana
Harsukh Makwana

Reputation: 4494

Try the following:

.parent-div {
  position: relative;
  width: 300px;
  height: 300px;
  border: 2px solid red;
}
.child-div {
  position: absolute;
  width: 296px;
  height: 296px;
  border: 2px solid black;
}
<div class="parent-div">     
  <!-- Parent DIV -->     
  <div class="child-div">     
    <!-- Child DIV -->
  </div>
</div>

Upvotes: 2

Related Questions