Sign in to follow this  
Vasant56

[web] Vertically aligning my div within a div

Recommended Posts

Vasant56    190
Hi, Essentially in my site I have a header and within that a title that floats left, and a menu that floats right.. now the problem is that the title is much larger than the menu, and I'm trying to align the menu so that it's bottom is vertically aligned with the the title. It seems that firefox and IE7 are aligning it a little differentl, so I can't hardcode padding values in.. here are my style properties #menu { float:right; font-size:20px; text-align:right; } #header h1 { font-size:50px; margin:0px; float:left; text-shadow:#404040; } #header { height: 55px; margin-bottom:50px; border-bottom: 4px solid #323232; } Any ideas would be greatly appreciated.. also what's a good place to buy a domain? Thanks

Share this post


Link to post
Share on other sites
Colin Jeanne    1114
I seem to remember adding something like to the styles of some similar floating blocks I had in the past.

position : absolute;
top : 0px;

This should align the objects to the top of their containing block.

Share this post


Link to post
Share on other sites
Vasant56    190
Thanks for the reply,

I'm trying to align things at the bottom of the block, but I tried what you said (Except I put bottom:0px;), and it seemed to line it up with the bottom of the page instead of the block..any other ideas?

Share this post


Link to post
Share on other sites
Guest Anonymous Poster   
Guest Anonymous Poster
It's hard to see what you're doing without a visual guide. But here's what I think might work for you:

Inbetween your title and menu, add another DIV whose style is:

height: 0px;
clear: both;

The clear: both; part ensures that nothing can be on the left/right of it, regardless of floating styles. So now you have the top of your menu lined up with the bottom of your title. To get the menu's bottom edge to line up with the bottom of the title DIV, give the menu a negative "margin-top" style. A negative margin-top will "pull up" the div. It works better than absolute positioning because it'll move the DIV upwards from it's current relative position.

The reason why I suggested having a DIV with clear: both; inbetween your title and menu is so they both really are left and right floated. Then the negative margin-top is what should pull the menu DIV up to align it with the title. The amount of margin-top is equal to the height of the menu div, negatively.

Share this post


Link to post
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

Sign in to follow this