CODEWITHSUNDEEP
htmlcsscss-position
Vivendi
Vivendi

Reputation: 21007

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

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>

Upvotes: 1

Views: 582

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371123

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>

Upvotes: 1

Related Questions