Black div is a fixed-height container. Blue div should be in the top right corner. Green text must respect the blue div, but also should be aligned to the bottom of the black div. Is that possible?
Asked
Active
Viewed 155 times
4
-
1I don't think there is any layout method that will let you do this. Not even flexbox since that will override the float. – Paulie_D Sep 15 '16 at 10:47
-
See - https://jsfiddle.net/umf1mhk7/ – Paulie_D Sep 15 '16 at 10:56
-
@Paulie_D, almost, but the child block in your fiddle should go upper, to the parent's top. – Denis Zhbankov Sep 15 '16 at 11:07
-
That's what I'm saying....it can't be done. I was just demoing that the fact that even if you could align the text to the bottom, you can't align the float to the top. – Paulie_D Sep 15 '16 at 11:11
-
You're probably right, I'm also thinking about it all day long and didn't come up with any solution. That's why this question exists, sometimes people offer truly insane solutions (e.g. like [that](http://stackoverflow.com/a/18171538/2736904)), that actually work. – Denis Zhbankov Sep 15 '16 at 11:15
-
@DenisZhbankov you want text to start with blue and align to bottom means text should go in shape as in your given image? – Leo the lion Sep 15 '16 at 13:40
-
@Leothelion, didn't really understand your question. If the black div is tall enough, the green text would just sit at the bottom, and the blue div at the top right (or left, doesn't matter) corner. – Denis Zhbankov Sep 15 '16 at 14:15
-
I could make a blue div positioned absolutely, but then they would overlap at some point of black div's height. Also Paulie_D proposed a way to just make everything vertically aligned to the bottom of the black div, but then the blue one wouldn't sit on the top. That's the problem. – Denis Zhbankov Sep 15 '16 at 14:16
