🔒 Locked

[web] Vertically aligning my div within a div

Started by Vasant56 Mar 3, 2007 at 11:51 PM 5 replies 1.5k views

Original Post

Mar 3, 2007 at 11:51 PM

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

Colin Jeanne

Mar 4, 2007 at 12:58 AM

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.

Vasant56

Mar 4, 2007 at 9:51 AM

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?

Colin Jeanne

Mar 4, 2007 at 1:35 PM

I just did some testing and the method works except not with floats. I dont know how to do this when the blocks are floating, sorry.

Tesseract

Mar 4, 2007 at 9:10 PM

You can give any element a position:relative, if you want to absolutely position things inside it.

Hodgman

Mar 4, 2007 at 9:27 PM

If you only need your site to work on two or three browsers, you can use some CSS hacks.

But if you want your site to work everywhere, you might have to make a pact with the devil, or go back to using HTML tables :(

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.