Solved

Clearing a div that has z-index

Posted on 2013-06-20
5
165 Views
Last Modified: 2013-06-20
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!
0
Comment
Question by:SiobhanElara
  • 2
  • 2
5 Comments
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39262671
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
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39262776
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39262802
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
 

Author Closing Comment

by:SiobhanElara
ID: 39262813
Oh good grief, of COURSE it should be position: relative; I feel like an idiot. Thank you so much!
0
 

Author Comment

by:SiobhanElara
ID: 39262830
Also true on the DOCTYPE... I was modifying an existing skin and didn't change that. Fixed, and thanks again!
0

Featured Post

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question