CSS have div over top of another div? - html

Question

I am not sure how to ask my question. If you go to this site: http://powellgroupconstruction.com/ I am trying to get the bottom of my content class to go over top my footer, like in this example image.
Here is my HTML:
<div class="wrapper">
<div class="content">
</div><!--content-->
</div><!--wrapper-->
<div class="footer">
</div><!--footer-->
and my CSS
.wrapper{
background-color:#FFF;
}
.content{
background-color:#FFF;
width:1027px;
min-height:300px;
margin:0 auto;
box-shadow: 12px 0 15px -4px #888, -12px 0 8px -4px #888;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
}
.footer{
background-color:#000;
height:500px;
}
Any help would be much appreciated.

Answer 1

you have to only set the content to position relative and elevate a z-index.
At this point your content are over the footer.
But now to push your footer behind you need to add a margin-top -100px , because the height you have defined in your css.
try this css code. (this work):
.wrapper{
background-color:#FFF;
}
.content{
background-color:#FFF;
width:1027px;
min-height:300px;
margin:0 auto;
box-shadow: 12px 0 15px -4px #888, -12px 0 8px -4px #888;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
position:relative;
z-index:999999;
}
.footer{
background-color:#000;
height:500px;
margin-top:-100px
}

Answer 2

You need to adjust the margins... Make the footer have a negative top-margin or the wrapper have a negative bottom margin... Oh, and give the wrapper a slightly elevated z-index...
.footer {
margin-top: -100px;
}
.wrapper {
position: relative;
z-index: 1;
}
OR
.wrapper {
margin-bottom: -100px;
position: relative;
z-index: 1;
}
I personally prefer the first one...

Answer 3

use z-index property higher than the footer
.wrapper{
background-color:#FFF;
}
.content{
z-index:100;
background-color:#FFF;
width:1027px;
min-height:300px;
margin:0 auto;
box-shadow: 12px 0 15px -4px #888, -12px 0 8px -4px #888;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
margin-bottom: -100px;
}
.footer{
z-index:1;
background-color:#000;
height:500px;
}
.wrapper,.footer,.content{
position:relative;
}
Also set position as relative to work the z-index property.For more detail and example visit css-tricks.com.Also set margin-bottom as negative value to overflow above the footer

Answer 4

You can achieve the result by using z-index property and saying position : absolute in div
.content{
z-index:1000;
position : absolute
.........
}
.footer
{
z-index:0;
position : absolute
}

Answer 5

The problem you have is the wrapper has a background-color. z-index only works with siblings, so you can do this: remove background-color: #fff; from .wrapper (otherwise the .wrapper color will block the footer from showing where it overlaps), or move .footer inside of .wrapper. Then add the following:
.footer {
position: absolute;
top: 250px;
z-index: -1;
width: 100%;
}
Here's a working Demo

Answer 6

Just use the following css rules
.content {
background-color: #FFFFFF;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
bottom: -90px;
box-shadow: 12px 0 15px -4px #888888, -12px 0 8px -4px #888888;
margin: 0 auto;
min-height: 300px;
position: relative;
width: 1027px;
height: 570px;
z-index: 1000;
}
.footer {
background-color: #000000;
height: 500px;
margin: 0 auto;
position: relative;
}