Jump to content

Aligning Two Float Divs To The Bottom Of A Container


jul
 Share

Recommended Posts

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

Link to comment
Share on other sites

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

Edited by thescientist
Link to comment
Share on other sites

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...
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...