CODEWITHSUNDEEP
htmlcss
Anwar Hussain
Anwar Hussain

Reputation: 450

IE / Edge issue with positioned element

I have two div elements styled as table-cell. Have two buttons on the footer. When I click on the buttons they do not stay at the place where they supposed to be in Microsoft Edge browser.

Everything is okay in the other browsers.

Here's the code block example:

.table {
  display: table;
}
.table-cell {
  display: table-cell;
  vertical-align: top;
  position: relative;
  overflow: hidden;
  width: 50%;
  background: #eee;
  border-right: 10px solid #fff;
  padding: 15px;
  height: 100%;
}
.buttons {
  position: absolute;
  bottom: 15px;
  right: 15px;
}
<div class="table">
  <div class="table-cell">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur sunt doloremque ratione dolore obcaecati quia laboriosam cum dolores modi, vel dolor quidem architecto quae voluptatibus. Reiciendis, quae vitae molestias dolores! Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Magni facilis explicabo at quos fugit natus mollitia facere, eos, ea inventore porro voluptate doloremque in sed cupiditate accusamus nisi sapiente quas.
  </div>

  <div class="table-cell">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam et quae esse, impedit sequi ex expedita. Assumenda totam eveniet laudantium corporis dignissimos, illo voluptatibus ratione sit eum numquam a, hic?
    <div class="buttons">
      <button>Clear</button>
      <button>Go</button>

    </div>
  </div>
</div>

Upvotes: 1

Views: 128

Answers (1)

Anwar Hussain
Anwar Hussain

Reputation: 450

Well, I have solved the issue myself! If someone has similar issue please do the following: 1. First wrap your content in a secondary div inside your display: table-cell div 2. make position: relative and height: 100% to the new wrapper div

Issue solved! Updated code: 

.table {
  display: table;
  height: 300px;
}
.table-cell {
  display: table-cell;
  vertical-align: top;
  overflow: hidden;
  width: 50%;
  background: #eee;
  border-right: 10px solid #fff;
  padding: 15px;
}
.content {
  position: relative;
  height: 100%;
}
.buttons {
  position: absolute;
  bottom: 0;
  right: 0;
}
<div class="table">
  <div class="table-cell">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur sunt doloremque ratione dolore obcaecati quia laboriosam cum dolores modi, vel dolor quidem architecto quae voluptatibus. Reiciendis, quae vitae molestias dolores!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur sunt doloremque ratione dolore obcaecati quia laboriosam cum dolores modi, vel dolor quidem architecto quae voluptatibus. Reiciendis, quae vitae molestias dolores!
  </div>

  <div class="table-cell">
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam et quae esse, impedit sequi ex expedita. Assumenda totam eveniet laudantium corporis dignissimos, illo voluptatibus ratione sit eum numquam a, hic?
      <div class="buttons">
        <button>Clear</button>
        <button>Go</button>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions