0

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; 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.

Community
  • 1
  • 1
mswieboda
  • 1,026
  • 2
  • 10
  • 30
  • The problem is that your height of 100% is going to take the full height of the parent element, which is `` - causing its height to extend to the height of the viewport. If I'm not mistaken, are you trying to make the two floated columns the same height? If you make them the same height, then the `position: bottom` would work. Remember: the height of floated containers are only as tall as their content goes. – Terry Mar 04 '13 at 22:26

2 Answers2

0
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.

MIIB
  • 1,849
  • 10
  • 21
0

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

Clayton
  • 70
  • 9