How to absolutely position adjacent sibling below a relatively positioned ancestor?

HTML & CSS
1

I have a centered, fixed-width layout (977px) that contains a footer whose background needs to extend all the way across the viewport, while the main layout remains fixed at 977.

In order to do this, I’ve absolutely positioned the footer with a 100% width.

The only thing I’m still unable to do is to get the footer to lay behind the its container div (.wrapper). Is this possible without assigning absolute positioning to the wrapper div?

The look I’m trying to achieve with the footer is like this. Note how the main content aarea overlaps the footer slightly.

My structure is like this:

<body>
<div class="wrapper">
	<div class="main">
		<div class="content">content goes here</div>
		<div class="sidebar">sidebar content goes here</div>
	</div>
	<div class="footer">footer goes here</div>
</div>
</body>
2

Can you change the html or are we stuck with what you have at the moment?

If you can change the html it would probably be better with a sticky footer similar to what someone asked for the other day.

Otherwise you won’t be able to make the footer go behind .wrapper if .wrapper has a position:relative set as you can’t place a child behind the background of the parent. You could place the footer behind .main or you could use z-index:-1 on the footer as long as .wrapper is not positioned. However that won’t give you any usable sort of layout as the footer will be placed in relation to the viewport.

3

something like this may be

body, .wrapper {height:100%;margin:0;padding:0;}
.footer {position:absolute;top:auto;bottom:0;width:100%;height:166px;}
.main {height:100%;margin-bottom:166px;}

might need to play with this little bit, but thats the idea.

4

Thanks for posting :slight_smile:

But…

You can’t set height:100% to .wrapper because that will limit the page to always be an initial 100%. Any content that goes below the fold will simply spill out.

.footer {position:absolute;top:auto;bottom:0;width:100%;height:166px;}

You have now placed the footer at the bottom of the viewport where it will sit until content scrolls past and overlaps and then the footer will scroll away also.

.main {height:100%;margin-bottom:166px;}

You simply cannot use height:100% height in this way because assuming the parent has a defined height you have just again limited the element so that it can never grow. Combined with this you have added a 166px bottom margin so you now have pushed anything else 166px below the page. You can’t reduce the 100% by applying a margin to it :)The CSS faq on 100% height explains this issues here.

You should be using min-height:100% for the wrapper but you can’t nest further min-height:100% as they will collpase to auto. CSS just doesn’t work like that (unfortunately) unless you are using the display:table properties.

Sorry to pick holes in your code especially as you took the time to post but these are important concepts that need to be made clear in case anyone tries this :slight_smile:

5

Thanks for all the suggestions. My workaround was to use Paul’s suggestion of using the .main div instead of wrapper. as the one to overlap the footer. Works a charm :slight_smile:

I had forgotten that an absolutely positioned element is bound by the nearest relatively positioned container element.

I keep coming back to wanting a true absolute positioning property (say, position:absolute-body or position:absolute-html) that disregards the position of the nearest relatively positioned container and resets the element position with respect to the body or html element instead.

6

I keep coming back to wanting a true absolute positioning property (say, position:absolute-body or position:absolute-html) that disregards the position of the nearest relatively positioned container and resets the element position with respect to the body or html element instead.

If by BODY/ HTML you are referring to the viewport, that is accomplished with position: fixed; but then that means that that element will always be in visible in the window ( you wont be able to scroll it out of view). Or maybe what you meant is to be able to skip point of reference, such as position absolutely relate to ANY ancestor regardless of its positioning… that could get complex too.