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:

<div id="leftColWrap">
  <img src="images/logo.png" id="logo" border="0" alt="My Logo">
  <div id="leftCol">stuff in here</div>
</div>