Aligning two position:absolute elements to each other’s vertical center

[ekatzman]

I have been searching for days and I give up. Please, help. I have two elements–logo and a div navigation. They are aligned on top of each other and centered to each other. So not flushed left, but center to center.

Currently, I have them in a single wrapper div to attempt to keep them together, but I don’t need them to be that way. The navigation must start below the logo but end at the bottom of the page, regardless of the browser height, content on the page, etc. The nav must touch the bottom.

If I have the navigation as position:absolute, it reaches the bottom, but doesn’t center to the logo above. I have margin: 0 auto; on the navigation, but it ignores it when on absolute.

If I set the navigation to relative, it doesn’t reach the bottom of the page, despite having html, body, and the wrapper div set to height 100%. The problem is the navigation seems to stop at the height the browser thinks the wrapper div’s height rather than the actual wrapper height that I can see if I add a border.

I’m not sure if that makes sense, but here’s my simplified code. There’s probably a simpler way to do this and I’m now over-thinking the whole thing.

Oh, and it all needs to be responsive.

CSS:

html, body { height: 100% }

#leftColWrap { position: absolute; left: 6%; bottom: 0; width: 23%; min-width: 175px; max-width: 235px; min-height: 100%; height: auto; }

#logo { position: relative; margin: 20px auto; width: 100%; min-width: 175px }

#leftCol { position: absolute; bottom: 0; margin: 0 5%; width: 82%; min-width: 152px; height: 83%; padding: 0; background-color: rgba(0,103,82,0.90); border-top: 5px solid #fff; border-left: 5px solid #fff; border-right: 5px solid #fff }

HTML:

stuff in here

[xpy]

You don’t always have to specify widths and heights for absolute positioned elements. Setting top and bottom or left and right ‘fixes’ their width (or height) in relation to their container, if you experiment a little you’ll see how it works…
Also, if you want to set a margin:auto; for an absolute positioned element, all you need to do is to set a width and left and right the same works for top and bottom…
At last, I suppose you want something like this?

[ekatzman]

Here’s an image of what I’m trying to do.…Hopefully this link works.

[xpy]

is that what you want?

[ekatzman]

@xpy – That is it. If it keeps the alignment as the page resizes, then it’s exactly what I want. I will test later today and let you know. Thanks!!!

[ekatzman]

It works like a dream. Thanks!

[Author]

Posts