?
Solved

Clearing a div that has z-index

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

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 45

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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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... …
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 customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses
Course of the Month8 days, 13 hours left to enroll

621 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