div box aligning

How to align a box within another to bottom right/left?

[marty3d]

Hi!
I thought this was an easy task, but when trying to do it, I was lost.

I simply have two boxes using divs:
#box1{
width:300px;
height:200px;
}
#box2{
width:50px;
height:50px;
}

How should I do to make box2 sit in the bottom right corner of box1 with text wrapped around? I thought I'd use float:right but it only puts the box to the right where it's inserted, not necessarily at the bottom...Also played around with position, but I can't get it right at all. Either it was positioned almost right but layered on top of the text in box1, or totally not in place. :(

Trying to be visual (x are text):

------
¦text¦
¦x---¦
¦x¦x¦¦
¦x---¦
------
Thanks to any helpful soul out here!
/Martin

[Clinton Labombard]

Try vertical-align:bottom; along with float:right; or text-align:right;

[marty3d]

I assume you mean vertical-align:bottom for box1? Then everything in that box will get that...and I only want box2 to be affected...Or did I misunderstand your reply?

[Clinton Labombard]

Forget vertical-align. I'm dead wrong. Apparently vertical-align doesn't work the way I'd like it to.

[drhowarddrfine]

vertical-align is for inline elements.

[Lynque]

if each of your paragraph's is wrapped in <p></p> tags for each paragraph then float:right box2 and put it in the last paragragh contained in box1

Should work for you

[marty3d]

if each of your paragraph's is wrapped in <p></p> tags for each paragraph then float:right box2 and put it in the last paragragh contained in box1
Should work for you

Thanks!

That's actually what I've been doing and most of the time it works out ok, but if there's unsufficient amount of text, the box2 doesn't align nicely in the corner.

Any other tips?