Question

Here is my setup:

I have a comment container div. Inside this div, I have three more divs. Two are float-left, and one is float-right.

https://i.stack.imgur.com/z8l2J.jpg

These 3 divs have around them rounded-corner borders. I think it is pretty easy to tell which ones in the above image are float left and float right.

After the three floated divs, there is an invisible “clear” div,

<div style="clear:both; border:none;"></div>

My problem is, I can’t seem to find a way to make the “some test info” div slide all the way to the bottom of my comment (so that its bottom is right above the top of the “clear” div.

Answer 1

Float doesn’t work like that; elements will always float to the top like [insert simile here].

You’ll probably have to abandon the float method and use absolute positioning, something similar to

bottom:0;
left:0;

If you do this, you’ll need to set a top property also, so it doesn’t stack on top of the stats section.