Videos
Relative+absolute positioning is your best bet:
#header {
position: relative;
min-height: 150px;
}
#header-content {
position: absolute;
bottom: 0;
left: 0;
}
#header, #header * {
background: rgba(40, 40, 100, 0.25);
}
<div id="header">
<h1>Title</h1>
<div id="header-content">And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States.</div>
</div>
But you may run into issues with that. When I tried it I had problems with dropdown menus appearing below the content. It's just not pretty.
Honestly, for vertical centering issues and, well, any vertical alignment issues with the items aren't fixed height, it's easier just to use tables.
Example: Can you do this HTML layout without using tables?
If you're not worried about legacy browsers use a flexbox.
The parent element needs its display type set to flex
div.parent {
display: flex;
height: 100%;
}
Then you set the child element's align-self to flex-end.
span.child {
display: inline-block;
align-self: flex-end;
}
Here's the resource I used to learn: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://codepen.io/cgregurich/pen/jOBEZXb
I'm trying to understand flex box and stuff, and I'm very confused by align-content vs align-items and justify-content vs justify-items.
I don't think my confusion has much to do with understanding the different between align VS justify, but rather the difference between items and content.
Mainly the fact that to get this to display as I want (numbers in the center of the boxes), I have to use justify-content and align-items, but if I were to use justify-items and align-content then it doesn't work as desired.
Why?