I'm currently working on a CSS solution to organize various elements like buttons and text in a tabular column format. My main challenge lies in controlling the layout effectively, especially since CSS columns are not compatible with IE9 and earlier versions.
My goal is to horizontally align columns across the screen with a vertical-bottom alignment. I want the inner-most div to determine the column width, while its parent div dictates the spacing between each column.
If you have any advice or suggestions on how to approach this problem, please feel free to share your insights.
Layout
<--------------------> col3
<--------------------> col3
col1 <---------------> col3
col1 <---> col2 <---> col3
col1 <---> col2 <---> col3
CSS
.column { float:left; height:100px; display:table; }
.col {
vertical-align:bottom;
display:table-cell;
margin-right:15px; /* this does not work */
}
.coldata { width:20px } /* no spacing - element occupies total width of object */
HTML
<div class="column">
<div class="col">
<div class="coldata">A1</div>
<div class="coldata">B1</div>
<div class="coldata">C1</div>
</div>
<div class="column">
<div class="col">
<div class="coldata">A2</div>
<div class="coldata">B2</div>
</div>
</div>
As shown, the columns are aligned at the bottom with data stacked vertically. Here is a link to a demo showcasing this setup.