How to align floated elements to the bottom of their container - html

Question

Simple question, but I'm struggling with solution.
Jsfiddle here.
How can I get the title and date to both align to the bottom of the container, while ensuring that:
The length of the title will push the date across (but doesn't need to wrap)
The blue button is always centrally aligned between the date and the red icon
The titleBar container is always the same fixed height
Need a CSS-only solution if possible - I already know how to do this with JS if needed
HTML:
div class="titlebar bgEarth0">
<h1 id="title">Test Title</h1>
<h2 id="date">23 October 2013</h2>
<div class="icon"></div>
<div class="buttonArea">
<div class="button"></div>
</div>
</div>
CSS:
.titlebar { height: 50px; border:1px solid #000}
#title {font-size: 20px; font-weight: normal; float: left; margin:0}
#date { font-size: 12px; font-weight: normal; float: left; margin-left: 30px; margin:0 12px}
.buttonArea {position:relative; overflow:auto; height:40px; margin-top:5px}
.button {margin:0 auto; width:60px; height:40px; background:#0000ff}
.icon {float:right; background:#ff0000; height:40px; width:60px; margin-top:5px}

Answer 1

http://jsfiddle.net/hC236/
You can use absolute position.
Wrap title and date with a div and set its position to absolute.
HTML:
<div class="titlebar bgEarth0">
<div class="bleh">
<h1 id="title">Test Title</h1>
<h2 id="date">23 October 2013</h2>
</div>
<div class="icon">ddd</div>
<div class="buttonArea">
<div class="button"></div>
</div>
</div>
CSS:
.titlebar {
height: 50px;
border:1px solid #000;
position: relative;
}
.bleh {
position: absolute;
bottom: 0px;
left: 0px;
}
#title {
font-size: 20px;
font-weight: normal;
float: left;
margin:0
}
#date {
font-size: 12px;
font-weight: normal;
float: left;
margin-left: 30px;
margin:0 12px
}
.buttonArea {
position: absolute;
overflow:auto;
height:40px;
top:5px;
right: 0px;
}
.button {
margin:0 auto;
width:60px;
height:40px;
background:#0000ff
}
.icon {
background:#ff0000;
height:40px;
width:60px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
OR Table Example:
http://jsfiddle.net/hjM56/
HTML:
<div class="titlebar">
<div class="col-1">
<h1 id="title">Test Title</h1>
<h2 id="date">23 October 2013</h2>
</div>
<div class="col-2">
<div class="icon"></div>
</div>
<div class="col-3">
<div class="button"></div>
</div>
</div>
CSS:
.titlebar {
display: table;
height: 50px;
border: 1px solid #000;
width: 100%;
}
.col-1,
.col-2,
.col-3 { display: table-cell; }
.col-1 {
white-space: nowrap;
vertical-align: bottom;
width: 1%;
}
.col-2 {
text-align: center;
width: auto;
}
.col-3 {
text-align: right;
width: 1%;
}
#title {
font-size: 20px;
font-weight: normal;
display: inline-block;
margin: 0px;
padding: 0px;
}
#date {
font-size: 12px;
font-weight: normal;
margin-left: 12px;
margin-top: 0px;
margin-right: 12px;
margin-bottom: 0px;
display: inline-block;
padding: 0px;
}
.button {
width: 60px;
height: 40px;
background: #0000ff;
margin-top: 5;
display: inline-block;
}
.icon {
background: #ff0000;
height: 40px;
width: 60px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

Answer 2

Here is one way to do it but it involves some extra mark-up.
I added some wrappers around the title and date as follows:
<div class="titlebar">
<div id="titleArea">
<div id="table-wrap">
<div id="table-cell">
<h1 id="title">Test Title</h1>
<h2 id="date">23 October 2013</h2>
</div>
</div>
</div>
<div class="icon"></div>
<div class="buttonArea">
<div class="button"></div>
</div>
</div>
Apply the following CSS:
.titlebar {
height: 50px;
border:1px solid #000
}
#titleArea {
height:40px;
margin-top:5px;
float: left;
}
#table-wrap {
display: table;
height: 100%;
}
#table-cell {
display: table-cell;
height: 100%;
vertical-align: bottom;
}
#title {
font-size: 20px;
font-weight: normal;
padding:0;
display: inline;
}
#date {
font-size: 12px;
font-weight: normal;
padding-left: 12px;
display: inline;
}
.buttonArea {
position:relative;
overflow:auto;
height:40px;
margin-top:5px;
border: 1px dotted blue;
}
.button {
margin:0 auto;
width:60px;
height:40px;
background:#0000ff
}
.icon {
float:right;
background:#ff0000;
height:40px;
width:60px;
margin-top:5px;
border: 1px dotted blue; /* for demo only */
}
See demo at: http://jsfiddle.net/audetwebdesign/5NDDQ/
I created an outer wrapper #titleArea that has the same height and top margin as the #buttonArea.
Within #titleArea, I created a CSS table/table-cell (two nested div's) so that I can get the vertical alignment to be at the bottom.
Finally, I set display: inline to #title and #date.
A detail that may need adjustment involves the base line of the title and time. The bottom leading causes the text to sit slightly above the bottom edge of the button.
It seems like a lot of work for what appears to be a relatively simple requirement.
To make this a bit more bullet-proof, I would add a min-width to the .titlebar to prevent the .buttonArea to develop a horizontal scroll bar and the .icon from wrapping to a second line.

Answer 3

You shouldn't use floating unless necessary. See this JSFiddle Live Demo
Basically if you remove the floats and display:inline-block; instead, they will align. I also removed the overflow:auto, as that would limit the icon area.
Also, adding left:15%; will align the blue area between the date and the red area.
EDIT: Example with max-width specifications to contain the div inside the title bar. Live Demo