Position a Div at the Bottom of Its Container with CSS Flexbox

You will learn how to use a Flexbox column layout and margin-top: auto to push the final child element to the bottom of a container. You will also learn why the container needs available vertical space and when CSS Grid or absolute positioning may be more appropriate.

Flexbox is a CSS layout system for arranging elements along a main axis. When a container uses:

display: flex;
flex-direction: column;

its direct children are placed vertically from top to bottom.

To place one child at the bottom, give that child margin-top: auto:

margin-top: auto;

An auto margin consumes the leftover free space on that axis. In a vertical flex container, margin-top: auto expands above the element, pushing it downward.

This works only when #container has more height than its content. For example, it might have a fixed height, a responsive min-height, or stretch because of a parent layout. If the container naturally grows to exactly fit its children, there is no empty space for the auto margin to consume.

This approach is usually better than absolute positioning for normal page layout because the copyright element remains part of the document flow. It does not overlap content, and it moves naturally if its text wraps or its size changes.

Imagine #container as a vertical bookshelf.

• Normal child elements are books placed from the top shelf downward.
• margin-top: auto is an adjustable empty spacer placed above the copyright text.
• The spacer grows until it fills all unused room in the bookshelf.
• As the spacer grows, it pushes the copyright text onto the bottom shelf.

The bookshelf must have a known or available height. If it is only as tall as its books, there is no empty room for the spacer to fill.

Use a column Flexbox container and put an automatic top margin on the item that should be at the bottom.

<div id="container">
  <h2>Welcome</h2>
  <p>This content stays at the top.</p>

  <div id="copyright">
    Copyright Foo web designs
  </div>
</div>

#container {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 1rem;
  border: 1px solid #999;
}

#copyright {
  margin-top: auto;
}

flex-direction: column changes Flexbox's main axis from horizontal to vertical. The margin-top: auto on #copyright then takes all remaining vertical space and positions that element at the container's bottom.

If the bottom element is not the final child, the same rule still works. It will use the available space before that item, but elements after it will appear below it. For a footer-like element, it is generally simplest to make it the last direct child.

Consider this example:

<div class="card">
  <h2>Account</h2>
  <p>Your profile is active.</p>
  <p class="card-footer">Last updated today</p>
</div>

.card {
  display: flex;
  flex-direction: column;
  height: 240px;
  padding: 16px;
}

.card-footer {
  margin-top: auto;
}

Step by step:

1. .card becomes a flex container.
2. flex-direction: column places the heading, paragraph, and footer vertically.
3. The card has a height of 240px, so it may contain unused vertical space.
4. The heading and first paragraph take the space they need.
5. .card-footer receives margin-top: auto.
6. The browser gives that top margin all remaining space.
7. The footer is pushed to the bottom edge of the padded card.

If the text becomes very tall, the content can exceed the card's height. In that case, choose an appropriate overflow strategy or use min-height when the card should be allowed to grow.

This pattern is useful whenever a component has content at the top and a consistently bottom-aligned action or label:

• Product cards: Keep an “Add to cart” button aligned at the bottom even when product descriptions have different lengths.
• Profile cards: Place a status line or action buttons at the card's bottom.
• Dashboard panels: Keep metadata, timestamps, or links at the bottom of a widget.
• Application sidebars: Place a logout button at the bottom below navigation links.
• Page layouts: Push a page footer down when a page has little content.
• Modal dialogs: Keep confirmation buttons at the bottom while the dialog body occupies the upper area.

In real projects, developers commonly make reusable components vertical flex containers and use auto margins to separate groups of content.

A common card pattern is:

.product-card {
  display: flex;
  flex-direction: column;
  min-height: 22rem;
}

.product-card__actions {
  margin-top: auto;
}

This prevents action buttons from appearing at different heights across a grid of cards.

For a full-page layout, the same idea can keep a footer at the bottom when the page is short:

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page__main {
  flex: 1;
}

Here, flex: 1 makes the main section grow to consume available space, which places the footer after it near the viewport bottom. This is different from a fixed footer: it still moves downward when the page content grows.

Use semantic HTML where possible, such as <footer> for copyright information. The layout technique is the same:

<footer class="site-footer">Copyright Foo web designs</footer>

Forgetting to create a flex container

margin-top: auto has useful bottom-pushing behavior here because the parent is a column flex container.

/* Not enough by itself for this layout */
#copyright {
  margin-top: auto;
}

Fix it by applying Flexbox to the parent:

#container {
  display: flex;
  flex-direction: column;
}

Forgetting that the container needs free height

This will not visibly push the copyright down if the container has no extra space:

#container {
  display: flex;
  flex-direction: column;
  /* Its height is only the height of its content. */
}

Give it a height or minimum height when appropriate:

#container {
  min-height: 300px;
}

Using justify-content: space-between for the wrong structure

This can place the first and last children at opposite ends:

#container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

However, it also distributes space between every child. If several content elements should stay grouped at the top, margin-top: auto on the bottom item is usually clearer.

Applying the rule to a nested element

Flexbox affects direct children. If #copyright is deeply nested, its own parent may need to be the flex container, or the layout structure may need adjustment.

Using height: 100% without a height chain

A percentage height works only when the parent has a definite height. If no ancestor establishes one, height: 100% may not provide the expected space. Use a meaningful fixed height, min-height, or viewport unit such as 100vh depending on the layout.

A Grid alternative is useful when the container is explicitly a two-row component:

#container {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 300px;
}

The 1fr row takes remaining space, while the auto row holds the copyright content.

/* Push the final child to the bottom of a container */
.container {
  display: flex;
  flex-direction: column;
  min-height: 300px; /* Must have available vertical space */
}

.bottom-item {
  margin-top: auto;
}

• Use display: flex on the parent.
• Use flex-direction: column for vertical layout.
• Use margin-top: auto on the child to push downward.
• The parent needs unused height for a visible effect.
• Prefer min-height when the container should grow for large content.
• The item stays in normal document flow, unlike an absolutely positioned element.
• For a page footer, use min-height: 100vh on the page layout and flex: 1 on the main content area.

Can I put a div at the bottom of a container without absolute positioning?

Yes. Make the container a column flex container and give the bottom element margin-top: auto.

Why does margin-top: auto push an element to the bottom?

In a Flexbox layout, an auto margin absorbs available free space. In a column layout, the free space above the element becomes its top margin.

Why is my element not moving to the bottom?

Usually the container has no extra height. Add an appropriate height or min-height, or ensure the parent layout stretches the container.

Should I use height or min-height?

Use height when the component must have an exact size. Use min-height when it should be at least a certain size but must grow to avoid clipping larger content.

Is justify-content: space-between the same as margin-top: auto?

Not exactly. space-between distributes space among all flex items. margin-top: auto targets one item and is usually better for keeping multiple earlier items together.

Does this work if the bottom item is not a direct child of the container?

Not directly. Flexbox lays out direct children. Apply the layout rule to the relevant parent or change the HTML structure.

Can I use this for a footer at the bottom of a short page?

Yes. Use a page wrapper with min-height: 100vh, arrange it as a column flex container, and let the main content grow with flex: 1.

• CSS Flexbox — The layout system that enables vertical alignment and auto-margin space distribution.
• CSS Grid — An alternative layout system for explicit rows, including a flexible content row and a bottom footer row.
• CSS margins — auto margins behave differently in Flexbox and are central to this technique.
• Document flow — Understanding normal flow explains why this approach avoids overlap problems.
• CSS positioning — Compare normal-flow Flexbox layouts with relative, absolute, fixed, and sticky positioning.
• Viewport units — Units such as vh help create page layouts that fill the screen.
• Responsive card layouts — Bottom-aligned action areas are common in card grids with variable-length content.