Clearing a div that has z-index

So I was messing around with creating a template for MangoBlog and ran into an issue. I want to have the basics; a header, a full-width image, the content, and a sticky footer.

<header class="clearfix">
	this is the header
</header>
<div id="hero-image">
	this is where the image goes
</div>
<div class="container clearfix">
	<div id="all-content">
		<div id="main-content" class="full-width">
			here are the posts
		</div>
	</div>
</div>
<footer>
	here's the footer
</footer>

Open in new window


All was going well until I decided to pull the content container a bit up over the image by giving the all-content id a z-index. Now the footer is at the bottom of the screen as it first loads, not at the bottom of everything. Here's the stripped-down css:

* { box-sizing: border-box; }

html { position: relative; min-height: 100%; }

body { height: 100%; margin: 0 0 100px; /* bottom = footer height */ }

.container { width: 95%; max-width: 1024px; margin: 0 auto; position:relative;}

header { width: 100%; position: fixed; z-index: 10; }

#hero-image { margin-bottom: 24px; height: 450px; overflow: hidden;}

#all-content { z-index: 5; position: absolute; top: -120px; width: 100%; }

#main-content { width: 64%; margin-right: 2.66666666%; float:left;}
#main-content.full-width { width: 100%; margin: 0; }

footer { position: absolute; left: 0; bottom: 0; height: 100px; width: 100%; }

Open in new window


(It's available at melcontent.com if needed.)

So my question is this: how do I effectively "clear" a div that's been taken out of the flow? Thanks!
SiobhanElaraAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Chris StanyonConnect With a Mentor Commented:
It's the absolute positioning of your footer that sticks it to the bottom of your screen (position:absolute; bottom:0) - not the z-index! That just changes the stacking order. Your content is taken out of the flow so there nothing to give the body height. To fix it, remove float:left from #main-content and change #all-content from position:absolute to position:relative.

You'll also see that the width of your content is wider than it should be - your wrapper has a maximum width of 1024 and the inner content is set to 100% width (1024px) plus 96px padding (48px left and right.) The maths don't add up.
0
 
Jagadishwor DulalBraces MediaCommented:
Yes you need to edit your footer style add z-index, yes again there is still problem write what you need after this:
footer {
    background-color: #5DB0C0;
    bottom: 0;
    clear: both;
    color: #FFFFFF;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 99;
}

Open in new window

0
 
Chris StanyonCommented:
One other thing - you have an old XHTML Transitional DOCTYPE!! but you are trying to use the new HTML5 Tags. Change your DOCTYPE...

<!DOCTYPE html>
<html lang="en">
	<head>
	....

Open in new window

0
 
SiobhanElaraAuthor Commented:
Oh good grief, of COURSE it should be position: relative; I feel like an idiot. Thank you so much!
0
 
SiobhanElaraAuthor Commented:
Also true on the DOCTYPE... I was modifying an existing skin and didn't change that. Fixed, and thanks again!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.