Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Clearing a div that has z-index

Posted on 2013-06-20
5
Medium Priority
?
172 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 44

Accepted Solution

by:
Chris Stanyon earned 2000 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 44

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses

604 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