0

I'm trying to align a div at the bottom of another div (parent/child), but I can't seem to figure it out.

enter image description here

What I want to do is align the text that has the date as well as the edit/delete links to the bottom of the "bubble".

Here's the code I'm using:

<div class="bubble_wrap"> <div class="bubble_image"><img src="http://sitefrost.com/images/avatars/Avatar-3-Admin.gif"></div> <div class="bubble_content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque auctor imperdiet. Morbi mollis nulla et odio scelerisque rutrum. Fusce sem justo, porta vel lacinia quis, convallis et elit. Sed id velit ut magna lobortis placerat at ut lectus. Aenean vel velit sem. <div class="date">June 9th, 2011 at 12:01 pm &ndash; <a href="#">Edit</a>&nbsp;&nbsp;<a href="#">Delete</a></div> </div> </div> .bubble_wrap { overflow: auto; margin-bottom: 10px; } .bubble_wrap .bubble_image { float: left; margin-right: 0px; margin-bottom:3px; } .bubble_wrap .bubble_image img { max-width: 85px; max-height: 85px; } .bubble_wrap .bubble_content { width: 565px; min-height:60px; background: #fbfcfe; background: -moz-linear-gradient(top, #fbfcfe 0%, #f3f4f6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfcfe), color-stop(100%,#f3f4f6)); background: -webkit-linear-gradient(top, #fbfcfe 0%,#f3f4f6 100%); background: -o-linear-gradient(top, #fbfcfe 0%,#f3f4f6 100%); background: -ms-linear-gradient(top, #fbfcfe 0%,#f3f4f6 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfcfe', endColorstr='#f3f4f6',GradientType=0 ); background: linear-gradient(top, #fbfcfe 0%,#f3f4f6 100%); border:1px solid #CFD0D2; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; float: right; padding:10px; position:relative; } .bubble_wrap.bubble_right .bubble_image { float: right; margin-right: 0px; margin-left: 0px; } .bubble_wrap.bubble_right .bubble_content { float: left; } .bubble_wrap.bubble_right .right { text-align:right; } .bubble_wrap .date { color: #888; font-size:11px; display:block; } .bubble_wrap .date a:link, a:visited, a:hover { text-decoration:none; font-weight:bold; color:#888; }
Improve this question

3 Answers 3

Reset to default
2

You could do this using position absolute

.bubble_content{position:relative} .date{position:absolute; bottom:0; left:0;}

or you could also change your html structure a little bit so it looks like this:

<div class="bubble_wrap"> <div class="bubble_image"><img src="http://sitefrost.com/images/avatars/Avatar-3-Admin.gif"></div> <div class="bubble_content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pellentesque auctor imperdiet. Morbi mollis nulla et odio scelerisque rutrum. Fusce sem justo, porta vel lacinia quis, convallis et elit. Sed id velit ut magna lobortis placerat at ut lectus. Aenean vel velit sem. <div class="date">June 9th, 2011 at 12:01 pm &ndash; <a href="#">Edit</a>&nbsp;&nbsp;<a href="#">Delete</a></div> </div>

and set a padding on the bottom of .bubble_content

Either way is pretty clean. and simple to execute.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Yep, this is how I would do it too - I would just make sure to add bottom padding to .bubble_content or the text could overlap with the .date.
I forgot to mention that I have two different "bubbles". One that floats the text to the left, and one that floats the text to the right. i.imgur.com/l3hkh.jpg How can I do position if the text is floated?
since there is probably a class on the text that is on the right you can simply change position:left to position:right, or if you just padded the text down, float:right should work.
1

Set the position of the containing div to relative and the inner div containing the date to absolute giving it a bottom position of 0. Then, make sure the containing div has enough bottom padding to always allow the inner div to show without covering the text that comes before it.

Improve this answer

2 Comments

I forgot to mention that I have two different "bubbles". One that floats the text to the left, and one that floats the text to the right. i.imgur.com/l3hkh.jpg How can I do position if the text is floated?
It shouldn't matter. You're setting the positioning to relative on the outer div so that when you set positioning to absolute on the inner div it positions it with respect to its parent container. The strategy is still the same. By setting position to absolute on the date, you can place it to the left or right anywhere you like by just giving it a left or right value.
0

When looking at your code the .bubble_wrap class has a margin-bottom assigned, try changing this to 0 and asigning it to the .date class to give your padding. I would also suggest if you want more space between the date and text to assign a margin-top to the .date class. 

.bubble_wrap { overflow: auto; margin-bottom:0; } .date { margin-top:10px; margin-bottom:10; }

I hope this helps.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.