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
  </h2>
</div>

Suggestions?



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..

    Show / Hide HTML using swatch / HTML 5 - dynamic HTML

    How to have only a vertical scroll bar on a div

    How to apply CSS to buttons?

    How to make an element with fixed position relative to its parent, not the whole screen?

    How to fill width with flex boxes

    How can I override the CSS ul menu for the JavaScript autocomplete?

    How to Generate All Possible CSS 2 Selector Combinations?

    How do I make my website’s layout work gracefully with different browser window sizes, like Tumblr does?

    How do I set a custom style to a BorderConatiner in Dojo using CSS

    How to position an element just off the top of the browser viewport using only css?

    How to position the element using absolute position?

    How to align image to top left of div

    Css styling without !important - how to do this?

    Getting CSS3 PIE.htc to show up in child elements when used on parent element

    How to enable auto indentation in lists and list items?

    How to add code area css style to HTML

    How to remove dot '.' from CSS list-style:decimal [duplicate]

    How to highlight a whole cell when hovering over link

    How to use different kind of Google Font types?

    How to integrate Thread and

    CSS attribute selectors: how to escape newlines within attribute value?

    How do I write a php function to show class in navigation menu url using php self

    How to make a page look good printed/across multiple browsers

    How to make a parent --> node relationship in css?

    How can I find out what CSS is needed to implement twitter Bootstraps Modal. [closed]

    How to write below CSS lines in zend framework 2 syntax?

    In IE6, how to float item to right without clearing it?

    How to create inheritance with LESS?

    How to make a vertical border in html/css using a gradient effect that stretches 100% height

    How to create an integrated row in the table?