?
Solved

Clearing a div that has z-index

Posted on 2013-06-20
5
Medium Priority
?
169 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 43

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 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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 a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses
Course of the Month14 days, 1 hour left to enroll

800 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