How to place div at the bottom?

Question

I have this rather simple setup, and would just like to move the outer div (neumorphic-input) to the bottom of my page. How can I do this using the current CSS I have.

I am currently using the CSS to align the two elements in the dive side by side and horizontally centred on my page.

HTML:

<body class="body">

    <div class="neumorphic-input">
        <textarea class="text-input" id="text-input" placeholder="Enter your message"></textarea>
        <button class="send-button">Send</button>
    </div>

</body>

CSS:

.neumorphic-input {
  display: flex;
  flex-direction: row;
  justify-content: center;

}

you need to make the `.body { min-height: 100vh }` and then make the div absolutely ( or fixed or sticky ) positioned to `bottom: 0` — Cornel Raiu, Jan 12 '23 at 18:35
keep in mind that in order to position something absolutely, the parent needs to have `position: absolute` or `position: relative`. https://developer.mozilla.org/en-US/docs/Web/CSS/position — Cornel Raiu, Jan 12 '23 at 18:36
I tried adding ```position:absolute; bottom:0``` to the div, but it messes up the entire layout. both size and horizontal alignment — Nick, Jan 12 '23 at 18:37
@Nick go ahead and read on the docs I linked in a comment above — Cornel Raiu, Jan 13 '23 at 01:06

score 1 · Accepted Answer · answered Jan 12 '23 at 18:40

You can use min-height: 100vh; and some flexbox to position it at the bottom of the screen:

.neumorphic-input {
  display: flex;
  flex-direction: row;
  justify-content: center;

}

body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
}

<body class="body">

    <div class="neumorphic-input">
        <textarea class="text-input" id="text-input" placeholder="Enter your message"></textarea>
        <button class="send-button">Send</button>
    </div>

</body>

How to place div at the bottom?

1 Answers1