How to align content of a div to the bottom

Question

Say I have the following CSS and HTML code:

#header {
  height: 150px;
}

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

The header section is fixed height, but the header content may change.

I would like the content of the header to be vertically aligned to the bottom of the header section, so the last line of text "sticks" to the bottom of the header section.

So if there is only one line of text, it would be like:

-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------

And if there were three lines:

-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------

How can this be done in CSS?

score 1405 · Accepted Answer · edited Sep 20 '17 at 11:21

1405

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);
}

<div id="header">
  <h1>Title</h1>
  <div id="header-content">Some content</div>
</div>

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?

edited Sep 20 '17 at 11:21

GKFX

1,338
1
11
27

answered Feb 25 '09 at 13:20

cletus

578,732
155
890
933

4

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 – kristof Feb 25 '09 at 13:49
16

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. – Alejandro García Iglesias Jul 25 '12 at 19:16
1

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` – Josh Burgess Feb 11 '14 at 21:18
if `#header` has a fixed height, here is a quick hack: `#header-content { position: relative; bottom: -4px; }` (change the -4px to whatever value works for you), this is kinda dirty but has the advantage of letting `#header` keep its positioning (ie. static) if required. Otherwise, go for @Cletus solution. – Adrien Be Jun 03 '14 at 12:49
This doesn't allow the content to scroll if the content is shorter than container. – bafromca Oct 29 '14 at 02:29
also if you want to align to the center (like `text-align: center`) you can use : `left: 0; right: 0;` in addition to what Cletus said. – Dima Gimburg Jun 17 '15 at 12:20
2

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. – Jeremy Moritz Jul 15 '15 at 21:21
1

Header position is relative to what ? – stack1 Aug 18 '15 at 18:24
This fails in react components; the right and modern way is the flexbox way. – Soleil Jan 27 '18 at 14:19
1

I disagree with @Jeremy-DeerAngel-org and agree with the accepted answer, sometimes tables are the right choice. Don't sacrifice layout stability with the "don't use tables" ideology. Tables are usually not the right choice with our modern JS frameworks, but tables sometimes are the best approach for the layout. – Ligemer Mar 21 '18 at 03:07
Does not work when the content on the bottom has variable height, causes it to extend out of the container bounds. – Mozfet May 16 '19 at 14:30

score 174 · Answer 2 · edited Jul 19 '19 at 21:11

174

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>

edited Jul 19 '19 at 21:11

Peter Mortensen

28,342
21
95
123

answered Feb 25 '09 at 13:18

Patrick McElhaney

52,844
37
123
157

5

fyi ... this caused my header-content to collapse its width, so I had to add a `width = '100%'` on the header-content – dsdsdsdsd Nov 05 '13 at 16:28
2

@dsdsdsdsd You could also fix that by adding display:block to #header-content. – Patrick McElhaney Apr 22 '14 at 20:37
1

@dsdsdsdsd The reason is because `` 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 `
`, which is a block element by default.
– BadHorsie Jul 19 '17 at 13:19
1

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.
– Patrick McElhaney Jul 19 '17 at 16:38
Does not work when the content on the bottom has variable height, causes it to extend out of the container bounds. – Mozfet May 16 '19 at 14:30

score 168 · Answer 3 · edited Apr 19 '20 at 10:52

168

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/

edited Apr 19 '20 at 10:52

johannchopin

7,327
6
22
62

answered Aug 25 '14 at 20:46

Lee Irvine

2,350
1
11
12

@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. – Lee Irvine Jan 22 '15 at 18:25
Did not work for me, I want it at the bottom of the container, not the end of the items in the container. – Mozfet May 16 '19 at 14:29
1

In 2020 this should be the correct answer: https://caniuse.com/#feat=flexbox – tonygatta Jan 31 '20 at 11:13
2

i think this is the better answer than relative absolute , its more flexible – zero8 Jul 22 '20 at 09:56

score 129 · Answer 4 · edited Apr 19 '20 at 10:52

129

I use these properties and it works!

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

edited Apr 19 '20 at 10:52

johannchopin

7,327
6
22
62

answered Apr 25 '09 at 09:43

42

Isn't supported in IE8 and earlier. It IS supported in IE9. – random_user_name Jun 05 '12 at 22:47
23

@cale_b According to [caniuse.com](http://caniuse.com/#search=table-cell) it *DOES* work in IE8. – Zach Lysobey Feb 28 '13 at 19:08
5

@ZachL Happenstance - I'm supporting a legacy app in IE8 for a corporate client and this _does in fact_ work. – Daniel Szabo Dec 18 '13 at 07:12
4

@fguillen: tested in Chrome (v31) just now as well. Works there, too. – Daniel Szabo Dec 18 '13 at 07:14
1

NOTE: `table-cell` will not allow you to use `min-height` (at least in Chrome 34). Sadly, that was a requirement for me, otherwise this'd be the exact solution I was looking for. (Still gets my upvote!) – Nathan J.B. Apr 26 '14 at 19:19
6

`table-cell` breaks a lot of things. Like the Bootstrap grid system. `col-md-12` won't give you a 100% wide div anymore. – Noah Dec 30 '14 at 20:27
1

Doesn't work if content of #header has display: block. – Atomosk Jul 15 '16 at 05:13
1

@Gavin Hmm, it certanly didn't work for me and switching display of content changed it. Sadly I can't remember exact example. But yours stops working if I set `position: absolute` to #header. Would be nice if there were all the additional conditions required. Like position shouldn't be absolute. – Atomosk Aug 29 '16 at 02:38
1

@Atomosk yes, setting a `display: table-cell` element to `position: absolute` will have undesired consequences. – Gavin Aug 30 '16 at 09:10
1

I like this - great for collapsing a row of divs with a header as the first element on a mobile. – JohnFF Mar 04 '17 at 14:29
1

This could be an issue if you want to use a flex box for your content. – Timothy Gonzalez Feb 02 '18 at 20:48
Stop supporting IE8 already, we are moving forward not backward – Capca May 19 '21 at 08:30

score 67 · Answer 5 · edited May 26 '16 at 12:27

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>

Align bottom content

Almost perfect :) but it doesn't allow automatic line breaks. — Gaston Sanchez, May 16 '15 at 00:23
Doesn't work if outer-container can scroll (overflow-y: auto). :( — ecraig12345, Jun 22 '15 at 21:08
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. — Sheepy, Apr 27 '16 at 03:33
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). — BairDev, Jun 27 '17 at 12:02

Stickers · Answer 6 · 2017-01-15T19:59:24.783

44

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>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

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 */
}

<section>Some text aligns to the bottom</section>

edited Jan 15 '17 at 19:59

answered Nov 24 '16 at 02:53

Stickers

63,307
17
114
156

2

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! – Swen Feb 27 '17 at 10:14
1

Inside react components, this is the right solution. The accepted solution fails. – Soleil Jan 27 '18 at 14:18
1

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. – B.K. Feb 27 '18 at 22:19
Works perfectly in react component – user1155773 Apr 01 '20 at 08:32
Works in react. And you can bottom-center the text with `justify-content: center;`. – Eugene Oct 10 '20 at 06:17

score 27 · Answer 7 · edited Apr 24 '17 at 04:53

27

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

edited Apr 24 '17 at 04:53

Pang

8,605
144
77
113

answered Apr 24 '17 at 04:31

2

Note that flexbox is not [well supported](http://caniuse.com/#feat=flexbox) in old browsers. – AnthonyB May 02 '17 at 15:20
12

@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 Sep 07 '17 at 15:23
3

@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. – AnthonyB Sep 07 '17 at 15:29
if the content under the `
` is inside a `
` or `
` I would use `justify-content: space-between`.
– agapitocandemor Mar 07 '18 at 15:14

score 25 · Answer 8 · edited Feb 09 '16 at 10:24

25

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

edited Feb 09 '16 at 10:24

Igor Ivancha

3,231
4
28
39

answered Dec 04 '12 at 22:16

dougwig

368
4
7

score 12 · Answer 9 · answered May 23 '18 at 06:08

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>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

score 7 · Answer 10 · answered Dec 28 '17 at 22:01

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;
}

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

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;
}

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

Best solution so far! Because it supports `overflow-y: auto` (other solutions doesn't). — beytarovski, Sep 11 '20 at 06:21

score 7 · Answer 11 · answered Jul 22 '20 at 11:51

7

You can use following approach:

.header-parent {
  height: 150px;
  display: grid;
}

.header-content {
  align-self: end;
}

<div class="header-parent">
  <h1>Header title</h1>
  <div class="header-content">
    Header content
  </div>
</div>

answered Jul 22 '20 at 11:51

Ayan

5,592
3
30
37

score 6 · Answer 12 · edited Feb 09 '16 at 10:32

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.

score 4 · Answer 13 · answered Feb 06 '15 at 12:49

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, Dec 19 '16 at 16:47

score 4 · Answer 14 · answered Jun 07 '16 at 20:33

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;
}

score 4 · Answer 15 · answered Feb 01 '18 at 13:17

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

Mozfet · Answer 16 · 2019-05-16T14:36:35.483

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.

score 3 · Answer 17 · answered Jul 12 '14 at 07:28

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

score 3 · Answer 18 · answered Feb 22 '16 at 19:17

3

Seems to be working:

HTML: I'm at the bottom

css:

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

answered Feb 22 '16 at 19:17

Admin File3

109
9

treecon · Answer 19 · 2021-03-03T15:23:10.333

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.

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

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

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

score 3 · Answer 20 · edited Jul 19 '19 at 21:22

3

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.

edited Jul 19 '19 at 21:22

Peter Mortensen

28,342
21
95
123

answered Aug 11 '11 at 15:33

mickburkejnr

3,463
11
69
107

1

Will cause content to float over other content when resizing screens using responsive layouts. – Mozfet May 16 '19 at 14:21

score 2 · Answer 21 · answered Nov 09 '16 at 09:42

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;

}

score 2 · Answer 22 · edited Oct 23 '17 at 00:41

2

#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;
}

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

edited Oct 23 '17 at 00:41

Ibo

3,351
6
33
51

answered Oct 22 '17 at 23:56

user841657

83
5

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. – Mozfet May 16 '19 at 14:23

Vinu Prasad · Answer 23 · 2021-03-23T05:44:17.180

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;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="box-wrapper d-flex flex-column col-4">
  <div>incidunt blanditiis debitis</div>
    <div class="news-box">
      <img class="d-block" alt="non ipsam nihil" src="https://via.placeholder.com/150">
      <p>Labore consectetur doloribus qui ab et qui aut facere quos.</p>
    </div>
  <a href="https://oscar.com" target="_blank" class="link-02">
    This is moved to bottom with minimal effort
  </a>
</div>

felix · Answer 24 · 2013-01-21T03:51:55.877

0

try with:

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

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

edited Jan 21 '13 at 03:51

answered Jan 21 '13 at 03:46

felix

35
2

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! – Mike Graf Feb 08 '13 at 16:42

score 0 · Answer 25 · edited Feb 09 '16 at 10:29

0

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;
}

edited Feb 09 '16 at 10:29

Igor Ivancha

3,231
4
28
39

answered Oct 15 '13 at 07:35

Nicki L. Hansen

17
1

1

Your first declaration `padding: 0 30px` is a bit redundant, you may as well have put `padding: 30px` then the other 2 declarations. – Andrew Oct 15 '13 at 07:57
Absolutely true, however I'm following the practices of my workplace. – Nicki L. Hansen Oct 15 '13 at 08:07
6

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 ;-) – Zach Lysobey Dec 18 '13 at 15:10

esp · Answer 26 · 2013-01-04T14:44:31.803

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.

score -4 · Answer 27 · edited May 30 '13 at 07:07

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 `
` tags... — Amos M. Carpenter, Nov 14 '11 at 06:17
@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](http://www.webstandards.org/learn/articles/askw3c/sep2003/) would result in the browser throwing an xml parsing error. — Razor, Dec 14 '12 at 13:16

score -7 · Answer 28 · answered Jan 10 '15 at 22:56

-7

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

answered Jan 10 '15 at 22:56

waza123

2,152
2
25
42

4

Table layout for this can be problematic; CSS is recommended instead. The valign property is also not supported in HTML5. (see http://www.w3schools.com/tags/att_td_valign.asp) – undeniablyrob Nov 19 '15 at 16:16

How to align content of a div to the bottom

28 Answers28

-

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.

` is inside a `

Linked

Related