CODEWITHSUNDEEP
cssinternet-explorer
Slava
Slava

Reputation: 3107

How to workaround IE bug where it is unable to properly absolute center element inside a parent without fixed size?

I've encountered a problem IE11 has (maybe other IE's too), where the centered elements (using absolute position method) are not positioned properly if parent has no fixed size. The size is determined by the content.

Is there any known workaround for this?

Example:

.box{
    position: absolute;
    top:0;
    right: 0;   
    left: 0;
    bottom:0;
    margin:auto;
    height:20px;
    width:20px;  
    background-color:#000;
}

.container{
    position: relative;
    background:red;
    padding-left:100px;
 }
<table>
  <tr>
    <td class="container">
      <div class="box">
      </div>
    </td>
    <td>
      Some content Some content Some content Some content Some content <br>
      Some content Some content Some content Some content Some content <br>
      Some content Some content Some content Some content Some content <br>
      Some content Some content Some content Some content Some content <br>
    </td>
  </tr>
</table>

Upvotes: 0

Views: 30

Answers (1)

Lucian
Lucian

Reputation: 1713

you should use <div> as a parent because relative position for <td> won't work on IE

check the updated snippet

.bg {
  background: red;
}

.box {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  height: 20px;
  width: 20px;
  background-color: #000;
}

.container {
  position: relative;
  padding-left: 100px;
}
<table>
  <tr>
    <td class="bg">
      <div class="container">
        <div class="box">
        </div>
      </div>
    </td>
    <td>
      Some content Some content Some content Some content Some content <br> Some content Some content Some content Some content Some content <br> Some content Some content Some content Some content Some content <br> Some content Some content Some content
      Some content Some content <br>
    </td>
  </tr>
</table>

Upvotes: 1

Related Questions