Align one element vertically at the bottom

Question

Align one element vertically at the bottom

I am facing an issue with aligning a single child element to the bottom of a holder div that has fixed dimensions. Currently, I have another element with the same height as the container, which helps in alignment at the bottom. However, when this second element is not present, the single child element sticks to the top regardless of the rules applied.

Is there a way to vertically align a single child element to the bottom of a container?

UPDATE

While preparing to share the code I'm working with, I managed to find a solution and implemented it. The main challenge was related to positioning rules and using display: inline-block on the child elements. That pretty much sums up my experience...

css vertical-alignment

Answer 1

Answer №1

Amazingly, I came up with a solution right after posting my question that is working perfectly:

Main Container Style:

.main-container {
    height:200px;
    position:relative;
    width:200px;
}

Child Element Style:

.main-container > * {
    bottom:0px;
    left:0px;
    position:absolute;
    right:0px;
}

The height of the Child element is determined by its block elements while remaining anchored to the bottom.

Answer 2

Amazingly, I came up with a solution right after posting my question that is working perfectly:

Main Container Style:

.main-container {
    height:200px;
    position:relative;
    width:200px;
}

Child Element Style:

.main-container > * {
    bottom:0px;
    left:0px;
    position:absolute;
    right:0px;
}

The height of the Child element is determined by its block elements while remaining anchored to the bottom.

Answer 3

Answer №2

A different method using table-cell

Starting with a basic markup:

<div class="wrap">
    <div>Some content...</div>
</div>

You can achieve the desired layout with the following CSS:

.wrap {
    border: 1px solid red;
    height: 200px;
    width: 200px;
    display: table-cell;
    vertical-align: bottom;
}

Main advantage: Compatible with both inline and block elements.
Drawback: Some older browsers may not support display: table-cell

For a demonstration, visit: http://jsfiddle.net/audetwebdesign/eXKbt/

Another approach using inline-block

An alternative way to achieve the same effect is by applying this CSS:

.wrap2 {
    border: 1px solid red;
    height: 200px;
    width: 200px;
}
.wrap2:before {
    content: "";
    width: 0;
    height: 190px;
    display: inline-block;
}
.wrap2 div {
    display: inline-block;
    width: 190px;
    border: 1px dotted red;
    vertical-align: bottom;
}

This method involves creating a pseudo-element to establish a fake inline block that serves as the baseline for vertical alignment of the child element. There may be some issues related to width, but they can be resolved.

Refer to the previous fiddle for a live demo.

Answer 4

A different method using table-cell

Starting with a basic markup:

<div class="wrap">
    <div>Some content...</div>
</div>

You can achieve the desired layout with the following CSS:

.wrap {
    border: 1px solid red;
    height: 200px;
    width: 200px;
    display: table-cell;
    vertical-align: bottom;
}

Main advantage: Compatible with both inline and block elements.
Drawback: Some older browsers may not support display: table-cell

For a demonstration, visit: http://jsfiddle.net/audetwebdesign/eXKbt/

Another approach using inline-block

An alternative way to achieve the same effect is by applying this CSS:

.wrap2 {
    border: 1px solid red;
    height: 200px;
    width: 200px;
}
.wrap2:before {
    content: "";
    width: 0;
    height: 190px;
    display: inline-block;
}
.wrap2 div {
    display: inline-block;
    width: 190px;
    border: 1px dotted red;
    vertical-align: bottom;
}

This method involves creating a pseudo-element to establish a fake inline block that serves as the baseline for vertical alignment of the child element. There may be some issues related to width, but they can be resolved.

Refer to the previous fiddle for a live demo.

Answer 5

Answer №3

While the information provided is minimal, one potential solution could look like this

.box {
  display: flex;
}

.item {
  align-self: flex-end;
}

Answer 6

While the information provided is minimal, one potential solution could look like this

.box {
  display: flex;
}

.item {
  align-self: flex-end;
}

Align one element vertically at the bottom

Answer №1

Answer №2

A different method using table-cell

Another approach using inline-block

Answer №3

Similar questions

CSS Grid expands the item width on its own when there is still space left

Display a unique button and apply a strike-through effect specifically for that individual list item

Ensure that only one menu with a specific class is open at any given time

ASP.NET Core 3.1 dynamic image resizing

Trouble with the Bootstrap navbar loading correctly

Struggling to make the text color change when hovering

Expanding Navigation Bar Glitch

Modifying object properties in JavaScript

How can I achieve a jQuery fade effect when hovering over an element?

What is the best way to scale down my entire webpage to 65%?

How can I remove the excess space from a column in Bootstrap 4?

What's causing my text to slowly appear while my HTML canvas remains static and unchanged?

Mastering the art of creating this particular design with CSS

The sweetalert 2 input field is unresponsive or disabled within a materializecss modal, making it impossible to type in

When the tailwind utilities are implemented, they do not appear on the screen

Mastering the precise placement of Angular-UI Bootstrap popovers: A step-by-step guide

Content within the p tag is failing to wrap onto separate lines

Remove CSS Styling from DataFrames in Pandas

The height auto transition in CSS3 begins by shrinking to a height of 0 before expanding to

I envision my home page being divided into two visually stunning full-screen sections, each taking up the entire height of the page