How can I get text to be vertically-aligned to the bottom and fill the empty space above it as needed?

Tags: html,css

Problem :

My designer came up with the following design thing:

enter image description here

However I'm not entirely sure how to get the text to stick at the bottom like you can see in the middle. I thought I could do something like (inline css is for example only):

<div style="vertical-align: bottom; height:30px;">
  <h2 style="line-height: 15px;font-size: 15px;padding: 0; margin:0;">
    Foo bar foo


Solution :

Assuming you use two divs for each 'button', if you set the outer divs (the black bits) to be position: absolute or position: relative you can use bottom:0 on the inner div containing the text. This'll have the effect of aligning the text div at the bottom of it's parent. Note: You can't use the vertical-align property, as that only does what you expect if you're looking at a table-cell.

    CSS Howto..

    How to Make an OS X Style Search in XHTML/CSS

    How to select a child element inside a div using CSS

    How to make footer responsive through CSS?

    How to use only CSS to round my div tag area's corners?

    How to align text under image using HTML/CSS?

    How to style a “list item > link” in jquery mobile

    How to configure opacity based CSS overlay to not effect spacing of surrounding elements?

    How to overlay image with color in CSS?

    CSS how to keep text always inline with a paragraph

    How do I display epub format book in pure HTML5/CSS/Jquery

    Position: fixed to position:static when horizontal scroll shows up?

    how to stack elements using CSS

    css: how to have a variable column size with text overflow ellipsis

    How can you do this in CSS

    How to get this simple layout done with CSS?

    Css accordion menu, how to set height to automatic?

    How to get CSS around links like login button

    How to remove a css class and add another when I get a certain mobile resolution

    How to convert px from photoshop to css

    How to structure css using BEM methodology for adaptive web pages?

    How can I split this image into pieces so when I write a long text, it doesn't go outside of the div?

    How to position one element relative another using CSS/jQuery

    How can I workaround this CSS anomaly?

    How can I create a postage stamp border?

    How to style default confirm box with only css?

    Background hover showing in CSS

    How to organize css files in a Joomla 2.5 template? [closed]

    How to rotate background in CSS?

    How to change width of object in mobile version

    How do I apply css to only IE 8 and below