How to align floated element at the bottom - html

Question

What is the preferred way to align a floated element
<div>
<button>goto</button>
<h1>TITLE</h1>
</div>
with the following css:
button {
float: right;
}
Why can't I use something like vertical-align: bottom ? I've seen solution which define a huge line-height but that seems to me like a hack. Is there a css3 solution ?
DEMO

Answer 1

There is a CSS3 option with the Flexible Box module, or flexbox for short. It is a candidate recommendation though, so it's still got browser support complexities.
The earliest support on Internet Explorer is IE10, but it supports an older version of the specification with a different syntax than the current version of the spec and requires the -ms- prefix. The same is true for IE10 Mobile, which supports the syntax from an interim version of the specification crafted in 2012. IE11 however supports the latest specification unprefixed. Android, too, only supports the old version of the spec with a -webkit- prefix prior to version 4.4. Both Safari and iOS Safari require the -webkit- prefix still today, but support the newer specification properties since version 6.1 on the desktop and 7.1 on iOS. Chrome and Firefox, being evergreen browsers, can safely use the current specification syntax unprefixed. And, if you care about BlackBerry, version 10 requires the -webkit- prefix using the current specification properties, while version 7 supports only the older specification.
Notwithstanding, if you have the luxury of designing for modern browsers only, flexbox is simple and intuitive. Below is how you could achieve what you want for those browsers that support the unprefixed version of the latest spec:
div {
background-color: lightgrey;
display: flex; /*creates the flexbox on the parent element*/
flex-direction: row; /*the content will be in rows versus columns*/
justify-content: space-between; /*distributes child elements evenly based on the space between them*/
}
h1 {
font-size: 40px;
}
button {
align-self: flex-end; /*aligns just this child element to the bottom of the flexbox parent*/
}

Answer 2

Assuming you want your button at the bottom, you can just absolutely position your button instead:
div {
...
position: relative;
}
...
button {
position: absolute;
bottom: 0;
right: 0;
}
JSFiddle demo.