CODEWITHSUNDEEP
htmlcss
user1269625
user1269625

Reputation: 3209

CSS have div over top of another div?

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. enter image description here

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.

Upvotes: 0

Views: 705

Answers (6)

Asraful Haque
Asraful Haque

Reputation: 1125

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

enter image description here

Upvotes: 0

brouxhaha
brouxhaha

Reputation: 4093

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

Upvotes: 0

user2232273
user2232273

Reputation: 4964

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
}

Upvotes: 2

Haji
Haji

Reputation: 2077

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
}

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115212

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

Upvotes: 0

philwills
philwills

Reputation: 995

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

Upvotes: 0

Related Questions