I want to align text to the bottom of a container. I know I can use position: relative;
on the container, and position: absolute; bottom: 0;
position: absolute; bottom: 0;
on the inner element to accomplish this. But, I have floated elements like such:
float: left; .align-bottom (and also float: left)
++++++++++++++++++++++++++++++++++++++++++++++++
+ #blah | +
+ | +
+ Title btn1 btn2 | TEXT +
++++++++++++++++++++++++++++++++++++++++++++++++
Where the floated element on the left has a non-fixed size.
How can I align TEXT to the bottom of the right container using CSS and HTML?
So far I've tried:
.align-bottom {
/* the 2nd floated element, on right side */
position: relative;
overflow: auto;
height: 100%;
}
.align-bottom div {
position: absolute;
bottom: 0;
}
CSSDesk: http://cssdesk.com/kNE98 (like jsFiddle, but no JS)
I've seen a few questions somewhat related (not many two floating containers though) including: Vertical Align with Absolute Positioning but it wasn't much help because the floated sections were the same height.
body{position:relative}
.align-bottom {
position: absolute;
bottom: -50px;
}
Dont check in on CSSDesk because the iframe has height 100% and it would send the bottom div to the bottom of the page. But with this code the div will be at the bottom of the body.
So I added a parent wrapper around the two columns you want to be the same height, along with a cf (clearfix) class that makes the wrapper be the full height of the floated element. Then I set the width (29%) of the element to make it sit nicely on the right side of the "left" div. Using position absolute and setting it to bottom: 0 allowed it to sit nicely.
Here is the cssdesk link with the correct code: http://cssdesk.com/SjSFQ
Regards
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.