A

Alan W. Smith

Relative+absolute positioning is your best bet:

#header { position: relative; min-height: 150px; } #header-content { position: absolute; bottom: 0; left: 0; } #header, #header * { background: rgba(40, 40, 100, 0.25); }

But you may run into issues with that. When I tried it I had problems with dropdown menus appearing below the content. It's just not pretty.

Honestly, for vertical centering issues and, well, any vertical alignment issues with the items aren't fixed height, it's easier just to use tables.

Example: Can you do this HTML layout without using tables?

I actually found that solution before asking here, but somehow forgot to add the position: relative; to the header div and the content kept landing at the bottom of the page. Thanks

You can manage your dropdown position with the z-index property to bring it to front. Remember that the z-index property works with elements positioned relatively or absolutely. Also, is not correct semantically speaking to use a table to achieve layout results.

In the case of text content as described in the original problem, #header-content should really be a p element, or at the very least a span

Don't use tables for non-tabular data! Instead, use the CSS display properties display: table-cell, or table-row, or table. You never again need to use tables for pure layout.

Header position is relative to what ?

j

johannchopin

If you're not worried about legacy browsers use a flexbox.

The parent element needs its display type set to flex

div.parent {
  display: flex;
  height: 100%;
}

Then you set the child element's align-self to flex-end.

span.child {
  display: inline-block;
  align-self: flex-end;
}

Here's the resource I used to learn: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

@bafromca, two reasons that doesn't work. 1: Use 'align-self' instead of align-items (my fault, I've edited my original post). 2: 100% height won't work unless the parent has height.

Did not work for me, I want it at the bottom of the container, not the end of the items in the container.

In 2020 this should be the correct answer: caniuse.com/#feat=flexbox

i think this is the better answer than relative absolute , its more flexible

P

Peter Mortensen

Use CSS positioning:

/* Creates a new stacking context on the header */
#header {
  position: relative;
}

/* Positions header-content at the bottom of header's context */
#header-content {
  position: absolute;
  bottom: 0;
}

As cletus noted, you need identify the header-content to make this work.

<span id="header-content">some header content</span>

<div style="height:100%; position:relative;">
    <div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div>

fyi ... this caused my header-content to collapse its width, so I had to add a width = '100%' on the header-content

@dsdsdsdsd You could also fix that by adding display:block to #header-content.

@dsdsdsdsd The reason is because <span> elements have display: inline; by default, which does not take up the full width of the container. The most appropriate fix would be to change the span to a <div>, which is a block element by default.

Or one of

-

which is also block by default and identifies the text as a header, which is useful to search engines, assistive technologies, and people reading the code.

Does not work when the content on the bottom has variable height, causes it to extend out of the container bounds.

j

johannchopin

I use these properties and it works!

#header {
  display: table-cell;
  vertical-align: bottom;
}

Isn't supported in IE8 and earlier. It IS supported in IE9.

@cale_b According to caniuse.com it DOES work in IE8.

@ZachL Happenstance - I'm supporting a legacy app in IE8 for a corporate client and this does in fact work.

@fguillen: tested in Chrome (v31) just now as well. Works there, too.

table-cell breaks a lot of things. Like the Bootstrap grid system. col-md-12 won't give you a 100% wide div anymore.

d

dylan-myers

After struggling with this same issue for some time, I finally figured out a solution that meets all of my requirements:

Does not require that I know the container's height.

Unlike relative+absolute solutions, the content doesn't float in its own layer (i.e., it embeds normally in the container div).

Works across browsers (IE8+).

Simple to implement.

The solution just takes one <div>, which I call the "aligner":

CSS

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

html

<div class="bottom_aligner"></div>
... Your content here ...

This trick works by creating a tall, skinny div, which pushes the text baseline to the bottom of the container.

Here is a complete example that achieves what the OP was asking for. I've made the "bottom_aligner" thick and red for demonstration purposes only.

CSS:

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

.bottom-content {
  display: inline-block;
}

.top-content {
  padding: 8px;
}

HTML:

<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
    </div>
    <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
      </div>
    </div>
  </div>
</body>

https://i.stack.imgur.com/8Eks6.jpg

Almost perfect :) but it doesn't allow automatic line breaks.

Doesn't work if outer-container can scroll (overflow-y: auto). :(

I guess that marin:8px should be margin:8px

This also works if put in a ::before rule, which removes the need of an extra element. We used flex at the end, but this is useful when you can't.

This is a really nice solution. It works only if the height of the box/container and its parents is set (to px or % or whatever).

S

Stickers

The modern way to do it would be using flexbox. See the example below. You don't even need to wrap Some text... into any HTML tag, since text directly contained in a flex container is wrapped in an anonymous flex item.

header { border: 1px solid blue; height: 150px; display: flex; /* defines flexbox */ flex-direction: column; /* top to bottom */ justify-content: space-between; /* first item at start, last at end */ } h1 { margin: 0; }

Header title

Some text aligns to the bottom

If there is only some text and you want to align vertically to the bottom of the container.

section { border: 1px solid blue; height: 150px; display: flex; /* defines flexbox */ align-items: flex-end; /* bottom of the box */ }

Some text aligns to the bottom

I needed my bottom-aligned element to still be present in the document flow, which isn't possible when using position:absolute;. This solution worked perfectly for my case!

Inside react components, this is the right solution. The accepted solution fails.

This is the only solution that actually worked for me. Maybe it has to do with React, as @Soleil has mentioned... I am not a CSS expert, so I'm not entirely sure.

Works perfectly in react component

Works in react. And you can bottom-center the text with justify-content: center;.

P

Pang

display: flex;
align-items: flex-end;

Note that flexbox is not well supported in old browsers.

@AnthonyB - define old? We have to change this record as developers. Technology moves forward, and the old simply don't survive. IE9 and 10 have issues with flex from what I can see, but they were released in 2011 and 2012 respectively... it's 2017. We have to let go of these outdated and broken browsers. If not for visual satisfaction, but for security and general software updates.

@Tisch you're absolutely right we have to, as developers, use decent and recent technology. But I'd simply warn about this compatibility issue, in order to not to be surprised.

if the content under the <h1> is inside a <p> or <div> I would use justify-content: space-between.

I

Igor Ivancha

Inline or inline-block elements can be aligned to the bottom of block level elements if the line-height of the parent/block element is greater than that of the inline element.*

markup:

<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

css:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

*make sure you're in standards mode

M

MK Vimalan

You can simply achieved flex

header { border: 1px solid blue; height: 150px; display: flex; /* defines flexbox */ flex-direction: column; /* top to bottom */ justify-content: space-between; /* first item at start, last at end */ } h1 { margin: 0; }

Header title

Some text aligns to the bottom

M

Maik Lowrey

I have encountered the problem several times and there are good solutions but also not so good ones. So you can achieve this in different ways with flexbox, with the grid system or display table. My preferred variant is a mix of flex and 'margin-bottom: auto'. Here is my personal collection of text-bottom possibilities:

1. Flex / margin-top: auto;

.parent { min-height: 200px; background: green; display: flex; } .child { margin-top: auto; background: red; padding:5px; color:white; }

Bottom text

2. Flex / align-self: flex-end

.parent { display: flex; min-height: 200px; background: green; } .child { align-self: flex-end; background: red; padding: 5px; color: white; }

Bottom text

3. Flex / align-items: flex-end;

.parent { min-height: 200px; background: green; display: flex; align-items: flex-end; } .child { padding: 5px; background: red; color: white; }

Bottom text

4. Grid / align-self: end;

.parent { min-height: 200px; background: green; display: grid; } .child { align-self: end; background: red; padding:5px; color:white; }

Bottom text

5. Table / vertical-align: bottom;

Personal I don't like this approach with table.

.parent { min-height: 200px; background: green; display: table; width:100%; } .child { display: table-cell; vertical-align: bottom; background: red; padding:5px; color:white; }

Bottom text

With spacer

6. Flex; / flex: 1;

.parent { min-height: 200px; background: green; display: flex; flex-flow: column; } .spacer { flex: 1; } .child { padding: 5px; background: red; color: white; }

Bottom text

7. Flex / flex-grow: 1;

.parent { min-height: 200px; background: green; display: flex; flex-direction: column; } .spacer { flex-grow: 1; } .child { padding: 5px; background: red; color: white; }

Bottom text

8. Inline-block / PseudoClass::before

.parent { min-height: 200px; background: green; } .child::before { display:inline-block; content:''; height: 100%; vertical-align:bottom; } .child { height:200px; padding: 5px; background: red; color: white; }

Bottom text

❤️ My personal preferred versions are: 1., 2. and 3.

A

Ayan

You can use following approach:

.header-parent { height: 150px; display: grid; } .header-content { align-self: end; }

Header title

Header content

T

Temani Afif

Here is another solution using flexbox but without using flex-end for bottom alignment. The idea is to set margin-bottom on h1 to auto to push the remaining content to the bottom:

#header { height: 350px; display:flex; flex-direction:column; border:1px solid; } #header h1 { margin-bottom:auto; }

We can also do the same with margin-top:auto on the text but in this case we need to wrap it inside a div or span:

#header { height: 350px; display:flex; flex-direction:column; border:1px solid; } #header span { margin-top:auto; }

Best solution so far! Because it supports overflow-y: auto (other solutions doesn't).

Great solution the margin-top: auto is inspired.

I

Igor Ivancha

If you have multiple, dynamic height items, use the CSS display values of table and table-cell:

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,
body {
  width: 100%;
  height: 100%;
}
.valign {
  display: table;
  width: 100%;
  height: 100%;
}
.valign > div {
  display: table-cell;
  width: 100%;
  height: 100%;
}
.valign.bottom > div {
  vertical-align: bottom;
}

I've created a JSBin demo here: http://jsbin.com/INOnAkuF/2/edit

The demo also has an example how to vertically center align using the same technique.

V

Vinu Prasad

The best possible solution to move a div to the bottom is as follows. Basically what you need to do is to set display flex and flex-direction as a column to the parent and add a 'margin-top: auto' to its child which needs to be floated to the bottom of the container Note: I have used bootstrap and its classes.

.box-wrapper { height: 400px; border: 1px solid #000; margin: 20px; display: flex; // added for representation purpose only. Bootstrap default class is already added flex-direction: column; } .link-02 { margin-top: auto; }

incidunt blanditiis debitis

Labore consectetur doloribus qui ab et qui aut facere quos.

This is moved to bottom with minimal effort

M

Mozfet

All these answers and none worked for me... I'm no flexbox expert, but this was reasonably easy to figure out, it is simple and easy to understand and use. To separate something from the rest of the content, insert an empty div and let it grow to fill the space.

https://jsfiddle.net/8sfeLmgd/1/

.myContainer {
  display: flex;
  height: 250px;
  flex-flow: column;
}

.filler {
  flex: 1 1;
}

<div class="myContainer">
  <div>Top</div>
  <div class="filler"></div>
  <div>Bottom</div>
</div>

This reacts as expected when the bottom content is not fixed sized also when the container is not fixed sized.

A

Aditya Ponkshe

You don't need absolute+relative for this. It is very much possible using relative position for both container and data. This is how you do it.

Assume height of your data is going to be x. Your container is relative and footer is also relative. All you have to do is add to your data

bottom: -webkit-calc(-100% + x);

Your data will always be at the bottom of your container. Works even if you have container with dynamic height.

HTML will be like this

<div class="container">
  <div class="data"></div>
</div>

CSS will be like this

.container{
  height:400px;
  width:600px;
  border:1px solid red;
  margin-top:50px;
  margin-left:50px;
  display:block;
}
.data{
  width:100%;
  height:40px;
  position:relative;
   float:left;
  border:1px solid blue;
  bottom: -webkit-calc(-100% + 40px);
   bottom:calc(-100% + 40px);
}

Live example here

Hope this helps.

Can you explain what bottom: -webkit-calc(-100% + x); is doing?

@mhatch it keeps footer at the bottom of the container.

a

absynthe minded web smith

Here's the flexy way to do it. Of course, it's not supported by IE8, as the user needed 7 years ago. Depending on what you need to support, some of these can be done away with.

Still, it would be nice if there was a way to do this without an outer container, just have the text align itself within it's own self.

#header {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 150px;
}

P

Pablo Contreras

a very simple, one-line solution, is to add line-heigth to the div, having in mind that all the div's text will go bottom.

CSS:

#layer{width:198px;
       height:48px;
       line-height:72px;
       border:1px #000 solid}
#layer a{text-decoration:none;}

HTML:

<div id="layer">
    <a href="#">text at div's bottom.</a>
</div>

keep in mind that this is a practical and fast solution when you just want text inside div to go down, if you need to combine images and stuff, you will have to code a bit more complex and responsive CSS

t

treecon

An addition to the other flex-box solutions mentioned:

You can use flex-grow: 1 on the first div. This way, your second div will be aligned to the bottom while the first will cover all remaining space.

On the parent div, you must use display: flex and flex-direction: column.

https://i.stack.imgur.com/cphU7.png

/* parent-wrapper div */
.container {
  display: flex;
  flex-direction: column;
}

/* first-upper div */
.main {
  flex-grow: 1;
}

Check fiddle: https://jsfiddle.net/1yj3ve05/

c

codeboy

if you could set the height of the wrapping div of the content (#header-content as shown in other's reply), instead of the entire #header, maybe you can also try this approach:

HTML

<div id="header">
    <h1>some title</h1>
    <div id="header-content">
        <span>
            first line of header text<br>
            second line of header text<br>
            third, last line of header text
        </span>
    </div>
</div>

CSS

#header-content{
    height:100px;
}

#header-content::before{
  display:inline-block;
  content:'';
  height:100%;
  vertical-align:bottom;
}

#header-content span{
    display:inline-block;
}

show on codepen

X

XMedia Software

I found this solution bassed on a default bootstrap start template

/* HTML */

<div class="content_wrapper">
  <div class="content_floating">
    <h2>HIS This is the header<br>
      In Two Rows</h2>
    <p>This is a description at the bottom too</p> 
  </div>
</div>

/* css */

.content_wrapper{
      display: table;
      width: 100%;
      height: 100%; /* For at least Firefox */
      min-height: 100%;
    }

.content_floating{
  display: table-cell;
  vertical-align: bottom;
  padding-bottom:80px;

}

I

Ibo

#header {
    height: 150px;
    display:flex;
    flex-direction:column;
}

.top{
    flex: 1;
}   

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

#header { height: 250px; display:flex; flex-direction:column; background-color:yellow; } .top{ flex: 1; }

This causes resizing of the top div. Which works for basic text layouts, but does not work when things have backgrounds and colors and sizes to respect.

P

Peter Mortensen

I have devised a way which is a lot simpler than what's been mentioned.

Set the height of the header div. Then inside that, style your H1 tag as follows:

float: left;
padding: 90px 10px 11px

I'm working on a site for a client, and the design requires the text to be at the bottom of a certain div. I've achieved the result using these two lines, and it works fine. Also, if the text does expand, the padding will still remain the same.

Will cause content to float over other content when resizing screens using responsive layouts.

f

felix

try with:

div.myclass { margin-top: 100%; }

try changing the % to fix it. Example: 120% or 90% ...etc.

Works perfectly fine with 1 set of content, but will need to be adjusted if the content changes. If it's dynamic content, then dont use this!

I

Igor Ivancha

The site I just did for a client requested that the footer text was a high box, with the text at the bottom I achieved this with simple padding, should work for all browsers.

<div id="footer">
  some text here
</div>

#footer {
  padding: 0 30px;
  padding-top: 60px;
  padding-bottom: 8px;
}

Your first declaration padding: 0 30px is a bit redundant, you may as well have put padding: 30px then the other 2 declarations.

Absolutely true, however I'm following the practices of my workplace.

Really?, that seems like plain bad practice. Just use the shorthand, or be explicit everywhere. padding: 60px 30px 8px;, padding: 60px 30px 8px 30px;, four explicit padding- rules, or even @TheWaxMann's suggestion are all superior - and I'm willing and able to argue that one ;-)

e

esp

Seems to be working:

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: -@header_height + @content_height;

    /* only need it if your content is <div>,
     * if it is inline (e.g., <a>) will work without it */
    display: inline-block;
}

Using less makes solving CSS puzzles much more like coding than like... I just love CSS. It's a real pleasure when you can change the whole layout (without breaking it :) just by changing one parameter.

T

Thomas

A perfect cross-browser example is probably this one here:

http://www.csszengarden.com/?cssfile=/213/213.css&page=0

The idea is both to display the div at the bottom and also making it stick there. Often the simple approach will make the sticky div scroll up with the main content.

Following is a fully working minimal example. Note that there's no div embedding trickery required. The many BRs are just to force a scrollbar to appear:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #floater {
            background: yellow;
            height: 200px;
            width: 100%;
            position: fixed;
            bottom: 0px;
            z-index: 5;
            border-top: 2px solid gold;
        }

    </style>
</head>


<body>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>


    <div id="floater"></div>
</body>
</html>

If you are wondering your code might not be working on IE, remember to add the DOCTYPE tag at the top. It's crucial for this to work on IE. Also, this should be the first tag and nothing should appear above it.

Since you're declaring your document as XHTML strict, you should also self-close your <br /> tags...

@KarlKildén if you were referring to the comment from aaamos, it most definitely isn't a silly comment - serving the above document with its correct content-type header would result in the browser throwing an xml parsing error.

This is a bad practise! Use CSS instead!

j

jmp

2015 solution

<div style='width:200px; height:60px; border:1px solid red;'>

    <table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
        <tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
    </table>

</div>

http://codepen.io/anon/pen/qERMdx

your welcome

Table layout for this can be problematic; CSS is recommended instead. The valign property is also not supported in HTML5. (see w3schools.com/tags/att_td_valign.asp)

How to align content of a div to the bottom

Header title

Title

-

which is also block by default and identifies the text as a header, which is useful to search engines, assistive technologies, and people reading the code.

Header title

Header title

Header title

Header title

Header title

Header title

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US