Position footer div at bottom inside table-cell with 100% width

Question

I have a container div with display: table and three inner divs that have display: table-cell .

The two outer table-cells have a fixed width, the inner table-cell has width:100% . So it scales with the size of the browser.

I also have a footer div that I'm trying to place at the bottom of the middle cell, with a width: 100% . But it expands way over the width of the middle table-cell.

How can this issue be fixed?

Example: https://jsfiddle.net/9opnx9r8/

HTML

 html, body { height: 100%; } .cell { display: table-cell; border: 1px solid red; } .cell1, .cell3 { min-width: 150px; } .cell2 { width: 100%; } .text { border: 1px solid green; position: absolute; left: inherit; bottom: 0; width: 100%; height: 70px; }

 <div style="display:table; min-height: 100%;"> <div class="cell cell1"> <h1>C1</h1> </div> <div class="cell cell2"> <h1>C2</h1> <ul> <li>List</li> <li>must</li> <li>stay</li> <li>top</li> </ul> <div class="text">FOOTER TEXT HERE</div> </div> <div class="cell cell3"> <h1>C3</h1> </div> </div>

Answer 1

The containing block for absolutely positioned elements is the nearest positioned ancestor.

If there is no positioned ancestor, the containing block is the viewport.

Therefore, add position: relative to the element that should be the containing block for the footer.

 html,body { height: 100%; } .cell { display: table-cell; border: 1px solid red; } .cell1, .cell3 { min-width: 150px; } .cell2 { width: 100%; position: relative; /* NEW */ } .text { border: 1px solid green; position: absolute; left: inherit; bottom:0; width: 100%; height: 70px; }

 <div style="display:table; min-height: 100%;"> <div class="cell cell1"> <h1>C1</h1> </div> <div class="cell cell2"> <h1>C2</h1> <ul> <li>List</li> <li>must</li> <li>stay</li> <li>top</li> </ul> <div class="text">FOOTER TEXT HERE</div> </div> <div class="cell cell3"> <h1>C3</h1> </div> </div>