There’s many posts on how to align to bottom right, but they all used absolute, and I can’t do that because I don’t want my 2 elements to overlap if one happens to be too big for the window size.
I tried with float, and it works to align right, but not to align bottom
<div style="border-bottom: 1px solid; padding-bottom:10px;">
<h1 style="display:inline;">
This is my big title - Bla bla bla
</h1>
<div style="
font-size: small;
float: right;
padding: 5px 0px 0px 20px;
font-style: italic;
display: inline;">
Published on Friday 11th August 2017 at 12:46
</div>
<div style="clear:both"></div>
</div>
You can check the result in https://jsfiddle.net/j66q82gy/7/
When the window is narrow, it doesn’t matter that it’s not aligned bottom, but when the window is wide and both h1 and the middle div are on the same line, it becomes apparent that it’s not aligned bottom, and I need it to be aligned bottom.
I also need to keep them on the same line, so the inline should stay on both h1 and the middle div.
Edit: Flex puts thing in a sort of awkward half inline, half block like this: i.imgur dot com/YA6TdBt.png
I need something that looks like this i.imgur dot com/Awj9Bht.png (top image is my code, bottom image is photoshoped to look like what I need.)
5
Answers
Is this what you envisioned?
https://jsfiddle.net/eq6jLnct/5/
Change the height to whatever you need. Or just use min-height.
Please not that flexbox is not supported for all browsers: http://caniuse.com/#search=flex-box
You can use flexbox properties instead of
float
…Completely updated answer
fiddle
Check this codePen I added, here’s the CSS:
Hope this will help
Methord 2:
You can go through the link of flexbox as it is very easy to use and highly resoposive.
With Flexbox you can align both at the bottom and keep the inner
div
right aligned.Add
display: flex; align-items: flex-end
to the outerdiv
, reset the margin on theh1
(or you can add one to the other innerdiv
) and then setmargin-left: auto;
to the innerdiv
The
align-items: flex-end
will keep the innerdiv
bottom aligned with theh1
and themargin-left: auto;
will push the innerdiv
to the right.Note, because of the different font size, their inner metrics will create a somewhat bigger white space below the
h1
. Here I simply added a 4px bottom padding on the innerdiv
, but you can also play with the overallline-height
Updated based on a comment
If to keep the text unwrapped until they hit their parents width, add
flex-wrap: wrap;
to outerdiv