Set the footer div to be positioned at the bottom within a table-cell that has a width of

Question

Set the footer div to be positioned at the bottom within a table-cell that has a width of

In my layout, I have a container div with display: table, containing three inner divs with display: table-cell.

The two outer table-cells have a fixed width, while the inner table-cell has width: 100% to scale with the browser width.

My challenge is placing a footer div at the bottom of the middle cell using width: 100%, but it extends beyond the boundaries of the middle table-cell. How can I address this issue?

For reference, please see the example here: https://jsfiddle.net/9opnx9r8/

Below is the HTML code snippet:

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>

html css css-position

Answer 1

Answer №1

To determine the containing block for absolutely positioned elements, look for the nearest positioned ancestor.

If there is no positioned ancestor to be found, then the containing block defaults to the viewport.

In order to designate an element as the containing block for the footer, make sure to include position: relative in its CSS properties.

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>

Answer 2

To determine the containing block for absolutely positioned elements, look for the nearest positioned ancestor.

If there is no positioned ancestor to be found, then the containing block defaults to the viewport.

In order to designate an element as the containing block for the footer, make sure to include position: relative in its CSS properties.

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>

Set the footer div to be positioned at the bottom within a table-cell that has a width of

Answer №1

Similar questions

What is the process for obtaining the eq of a visible list using jQuery?

Is there a way to display Bootstrap 4 progress bars next to each other in two distinct columns within a single container?

Tips on finding the key associated with a specific value

${IDHERE} element's text color not changing when tab is switched

Strange border adjustment for customized-height input[type=button] in Internet Explorer 6 and Firefox 3

Can the manifest.json file be edited dynamically?

.bootstrapMaterialDatePicker does not work within Codeigniter version 3

An image tag acts in a similar way to a div element

The justify-content-center class in the latest version of Bootstrap (v4.5) appears to be malfunction

What is the process for altering the active color of a materialize icon?

Learn how to transform the html:options collection into html:optionsCollection

Scrollable content below the div

What is one way to prevent a transformed element from being clipped by overflow-auto?

What is causing my button to act in this way?

Syntax Error: An unexpected token was found on the first line

Ways to link two PHP scripts

What is the best way to incorporate CSS from node_modules into Vite for production?

Refreshing SQL Server data using an HTML form

The latest div I inserted is not aligning to the bottom of the page

Positioning of Buttons in Bootstrap 4 Forms