Aligning Two Float Divs To The Bottom Of A Container

[jul]

hi,I've got a float left div and a float right div in a container. When trying to align them to the bottom of the container using display: table-cell; and vertical-align: bottom;, the highest one is at the bottom, but the top of the smallest one is aligned with the top of the highest one.What's wrong? How can I have the bottom of both the float divs align with the bottom of the container?thanksHere's my code

<div id="header">				<div id="logo">		Float left	</div>	 <div id="login">					  Float right	  </div></div>

#header{	width: 60em;	height: 10em;	overflow: hidden;		display: table-cell;	vertical-align: bottom;}#logo{	width: 20em;	float: left;		font-size: 5em;}#login{	width: 25em;	float: right;	font-size: 5em;}

[thescientist]

if you put them in a container div and wrote them side by side, you could try a couple of things:1) clear: both to that container div2) a really long top margini think the clear: both would work well. just have it come after your content and then your images will stay at the bottom of the content container

[jul]

if you put them in a container div and wrote them side by side, you could try a couple of things:1) clear: both to that container div2) a really long top margini think the clear: both would work well. just have it come after your content and then your images will stay at the bottom of the content container

clear:both does not change anything. The top of the smallest div is still aligned with the top of the highest one...

[thescientist]

I think I'm confused, do you want these div's to sit side-by-side?

[jul]

I think I'm confused, do you want these div's to sit side-by-side?

yes, one at the bottom left of the container, the other one at the bottom right.I attached an image in the following post:http://forums.digitalpoint.com/showthread.php?t=1553286