Inserting content at the footer of the webpage

Question

Inserting content at the footer of the webpage

I managed to center 2 divs using the power of flex, and now I want to introduce a third div at the bottom of the page, just like in the image below:

https://i.sstatic.net/pQleWm.jpg

(I need the first two divs to stay centered based on their parent element without being affected by the third div.)

I attempted to achieve this, but unfortunately, the third div kept getting pushed off-screen. I can't reduce the height of #centerWrapper below 100% either because then the alignment of the first two divs would be compromised.

Check out the JSFiddle here

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body,
#parent {
  width: 100%;
  height: 100%;
}
#centerWrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
#centerWrapper * {
  width: 100px;
  height: 100px;
}
#firstChild {
  background-color: brown;
}
#secondChild {
  background-color: lightblue;
}
#thirdChild {
  background-color: greenyellow;
}

<div id="parent">
  <div id="centerWrapper">
    <div id="firstChild"></div>
    <div id="secondChild"></div>
  </div>
  <div id="thirdChild"></div>
</div>

html css flexbox

Answer 1

Answer №1

MODIFICATION

To maintain the specific positions of both blocks without relying on flexbox flexibility, consider using the position property for better control. Apply the following ruleset to the #centerWrapper:

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

To keep #thirdChild at the bottom of the viewport, include these styles:

  position: absolute;
  bottom: 0;

Turn #parent into a flex container for both #centerWrapper and #thirdChild.

SNIPPET

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
#parent {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  background: yellow;
  overflow-y: visible;
}
#centerWrapper {
  width: 100px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#centerWrapper * {
  min-width: 100px;
  min-height: 100px;
}
#firstChild {
  background-color: brown;
}
#secondChild {
  background-color: lightblue;
}
#thirdChild {
  min-width: 100px;
  min-height: 100px;
  background-color: greenyellow;
  position: absolute;
  bottom:0;
}

<div id="parent">
  <div id="centerWrapper">
    <div id="firstChild"></div>
    <div id="secondChild"></div>
  </div>
  <div id="thirdChild"></div>
</div>

Answer 2

MODIFICATION

To maintain the specific positions of both blocks without relying on flexbox flexibility, consider using the position property for better control. Apply the following ruleset to the #centerWrapper:

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

To keep #thirdChild at the bottom of the viewport, include these styles:

  position: absolute;
  bottom: 0;

Turn #parent into a flex container for both #centerWrapper and #thirdChild.

SNIPPET

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
#parent {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  background: yellow;
  overflow-y: visible;
}
#centerWrapper {
  width: 100px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
#centerWrapper * {
  min-width: 100px;
  min-height: 100px;
}
#firstChild {
  background-color: brown;
}
#secondChild {
  background-color: lightblue;
}
#thirdChild {
  min-width: 100px;
  min-height: 100px;
  background-color: greenyellow;
  position: absolute;
  bottom:0;
}

<div id="parent">
  <div id="centerWrapper">
    <div id="firstChild"></div>
    <div id="secondChild"></div>
  </div>
  <div id="thirdChild"></div>
</div>

Answer 3

Answer №2

Is it possible to utilize position: absolute on the thirdChild element? Here is an example code snippet: https://jsfiddle.net/7qa7cd20/1/

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body,
#parent {
    width: 100%;
    height: 100%;
    position: relative;
}

#centerWrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#centerWrapper * {
    width: 100px;
    height: 100px;
}

#firstChild {
    background-color: brown;
}

#secondChild {
    background-color: lightblue;
}

#thirdChild {
    background-color: greenyellow;
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 100px;
    left: 50%;
    transform: translateX(-50%);
}

<div id="parent">
    <div id="centerWrapper">
       <div id="firstChild"></div>
        <div id="secondChild"></div>
    </div>
    <div id="thirdChild"></div>
</div>

Answer 4

Is it possible to utilize position: absolute on the thirdChild element? Here is an example code snippet: https://jsfiddle.net/7qa7cd20/1/

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body,
#parent {
    width: 100%;
    height: 100%;
    position: relative;
}

#centerWrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#centerWrapper * {
    width: 100px;
    height: 100px;
}

#firstChild {
    background-color: brown;
}

#secondChild {
    background-color: lightblue;
}

#thirdChild {
    background-color: greenyellow;
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 100px;
    left: 50%;
    transform: translateX(-50%);
}

<div id="parent">
    <div id="centerWrapper">
       <div id="firstChild"></div>
        <div id="secondChild"></div>
    </div>
    <div id="thirdChild"></div>
</div>

Answer 5

Answer №3

Your third child element is currently lacking height and width attributes, but you can easily center it by adding margin: auto;. I've set the div to 100x100 for visibility as well.

Check out the code here!

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body,
#parent {
    width: 100%;
    height: 100%;
}

#centerWrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#centerWrapper * {
    width: 100px;
    height: 100px;
}

#firstChild {
    background-color: brown;
}

#secondChild {
    background-color: lightblue;
}

#thirdChild {
    background-color: green;
    height: 100px;
    width: 100px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

#parent {
    position: relative;
}

<div id="parent">
    <div id="centerWrapper">
        <div id="firstChild"></div>
        <div id="secondChild"></div>
    </div>
    <div id="thirdChild"></div>
</div>

Answer 6

Your third child element is currently lacking height and width attributes, but you can easily center it by adding margin: auto;. I've set the div to 100x100 for visibility as well.

Check out the code here!

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body,
#parent {
    width: 100%;
    height: 100%;
}

#centerWrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#centerWrapper * {
    width: 100px;
    height: 100px;
}

#firstChild {
    background-color: brown;
}

#secondChild {
    background-color: lightblue;
}

#thirdChild {
    background-color: green;
    height: 100px;
    width: 100px;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

#parent {
    position: relative;
}

<div id="parent">
    <div id="centerWrapper">
        <div id="firstChild"></div>
        <div id="secondChild"></div>
    </div>
    <div id="thirdChild"></div>
</div>

Inserting content at the footer of the webpage

Check out the JSFiddle here

Answer №1

MODIFICATION

SNIPPET

Answer №2

Answer №3

Similar questions

Exploring html select and input elements in a loop

Tips for concealing v-text-field entered date symbol

Tips for accessing webpage data using pandas

Changing results in a 1px movement of the image

Customize hover effects for MuiCheckbox

Is it possible to include all the information in a form submission, not just the inputs?

Firefox failing to display fonts from Google Font API

Utilizing Angular to link input and button elements together

Load the jQuery script only in the absence of cookies

Ways to remove the extra space above and below text within a td element

BOOTSTRAP Issue: The sticky footer in the template is not staying sticky

Angula 5 presents a glitch in its functionality where the on click events fail

Breaking the website with an HTML comment

The color of a Three.js plane appears more intense with the addition of lights

The issue of CSS3 list navigation not aligning to the left side

I need help fixing the alignment of the lengthmenu and export buttons in Bootstrap Datatables Javascript. They are too close together and I want to create a line break between

Unlocking the Power of Dynamic Title Text in Your Content

Guide to adding a tag in front of a text in HTML with Python

Array containing HTML code for Ionic framework

Difficulty in aligning Grid elements in Material UI version 5