CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
Mrusful
Mrusful

Reputation: 1503

td with width 100% inside div with position absolute

Behavior of code snippet is different in Chrome 51.0.2704.103 and Firefox 47.0.1.

Please explain why this happens. Where behavior is correct, where not and why you think so. Thanks.

div,
td {
  border: 1px solid black;
}
.container {
  position: absolute;
}
.w100Pc {
  width: 100%;
}
.nowrap {
  white-space: nowrap;
}
<div class="container">
  <div>Modal dialog header</div>
  <table>
    <tr>
      <td class="w100Pc">rest of space column</td>
      <td class="nowrap">content based width column</td>
    </tr>
  </table>
  <div>Here goes main content what should stretch "container" width</div>
  <div>Modal dialog footer</div>
</div>

Upvotes: 1

Views: 125

Answers (1)

Ram Segev
Ram Segev

Reputation: 2571

Browser render the code differently i guess it's because they follow different standards, i think Firefox is rendering the code currently in you example and to make it look the same in both browsers just add display:block; 

div,
td {
  border: 1px solid black;
}
.w100Pc {
  display:block;
  width: 100%;
  font-family:'Times New Roman';
}
.container {
  position: absolute;
  left: 200px
}
<div style="position: absolute; left:200px">
  <table class="w100Pc">
    <tr>
      <td class="w100Pc">
        w100Pc
      </td>
      <td>buttons</td>
    </tr>
  </table>
</div>

Upvotes: 1

Related Questions