Hello Guys,
I was just wondering, and this is something I should know by now, how does one keep an element always at the bottom of a page ?
For example, if I had a container div in the body that had a width of 80% and height of 70%. Then inside said div I had another div that was 50 px width by 20em width. Now, how would I make sure that inside div is always in the lower right corner of the containing div regardless of the content (<p>, <img>, <video>, etc) that is in the container div*
*So even if there was no content or a single paragraph or pages of content, the inner div would always be on the bottom and floated right.
CSS doesn’t handle this very well, but one thing you could try is to put padding at the bottom of the container that matches the height of the element to go at the bottom of the div. The absolutely place that bottom element at the bottom of the container.
Only problem is that the other content won’t wrap around the bottom element.
If I understand correctly you should be able to give the parent div position: relative and the child div (inside div) position: absolute with styles bottom: 0px and right: 0px
Yes as mentioned already above you create a stacking context with position:relative on the parent and then you can absolutely place the child element at bottom:0 right:0 as already suggested.
One thing to remember is that the absolute element is removed from the flow so any other content in that div will overlap. As Ralph suggested you could add padding-bottom to the parent div to protect the absolute element and that will stop the content in the div over-writing it.
It is impossible though to have a div to appear to be floating at the bottom of a div and to allow text to wrap around it without manually posisioning it each time.
Actually, I lied, it is not impossible but it only works in Firefox and is quite complex.
