Aligning elements at the bottom of multiple columns - html

Question

I've got three unequal length columns of text and I want to put a button at the bottom of each column. I'm looking for a current method--preferably CSS only--of positioning the buttons so that they're at the same vertical position in the page when the columns are side-by-side (floated), and then are positioned after the relevant column when the layout is single column (on small screens). I don't necessarily need the columns to be equal length since they don't have backgrounds, unless that's part of the solution.
This is the code/description for the relevant section:
<div 1 - position:relative>
<div 2 - display:block;overflow:hidden>
<div 3 - position:relative; float:left>
<div 4 - display:block>
<img src="image1.jpg" />
<h1>Title 1</h1>
<p> Column 1 text</p>
</div 4>
</div 3>
<div 3 - position:relative; float:left>
<div 4 - display:block>
<img src="image2.jpg" />
<h1>Title 2</h1>
<p> Column 1 text</p>
</div 4>
</div 3>
<div 3 - position:relative; float:left>
<div 4 - display:block>
<img src="image3.jpg" />
<h1>Title 3</h1>
<p> Column 1 text</p>
</div 4>
</div 3>
</div 2>
</div 1>
I've tried lots of variations in code and placement, but I haven't been able to make it work. I've also found a few solutions, but they were either old (back to IE 5) or I couldn't figure out if they were relevant Maybe they were but I couldn't see it!).
Placing them in a separate div after the column divs looks good on a full screen, but on a small screen all the buttons are positioned after the last column. Placed at the beginning or end of the columns has them positioned vertically based on the length of text in each column.
I tried position:absolute;bottom:0 to place them at the bottom of div 2, with poor results. Any ideas/solutions are much appreciated.

Answer 1

The only non-JS solution I can think of would be to make it a table.
<table valign=top cellspacing=18px>
<tr>
<td align=center><h2>Title 2</h2></td>
<td align=center><h2>Title 2</h2></td>
<td align=center><h2>Title 3</h2></td>
</tr>
<tr>
<td valign=top>
<img src="image1.jpg" />
Column 1 text
</td>
<td valign=top>
<img src="image2.jpg" />
You looked me dead in the eye and told me you were dying.<br />
And then there was no light on the earth.<br />
But what you saw in me that night was not a light.<br />
Only Darkness.
</td>
<td valign=top>
<img src="image3.jpg" />
Column 3 text
</td>
</tr>
<tr>
<td align=center><button>Hello</button></td>
<td align=center><button>There</button></td>
<td align=center><button>Sir </button></td>
</tr>
</table>
This code gives the desired result, and you can mess around with the css for each cell.
Otherwise, you could loop through each div element with jQuery or pure JavaScript, find the largest height, store it in a variable, then loop back through the div elements containing the button and set each height according to the variable. Then the position:absolute;bottom:0px; would work.

Answer 2

Actually, the table only works on wider screens. Pretty sure it won't flow the text into a single column with the buttons between text sections. I used display: and screen width media queries to alternately display/hide two sets of buttons, one set positioned after each column and one set floated in a div positioned after all the columns. I guess I could have also made two versions and used a media query to display/hide based on screen width. The jsfiddle at jsfiddle.net/DTMgJ/5/ also solves it using media queries and large negative margins.