seo Question posted in
Some basic information to get you started with this can be found here.

Stop footer div from hiding behind content div – SEO

Hello fellow stackers,

I am attempting to place a footer at the bottom of my ticket, however the image divs that are placed above the footer hides the footer div. How would I be able to make this appear?

I have attached the relevant code below, alternatively you can check the JSFiddle. Thanks in advance for your help.

.goodbye {
    display:block;
}

@charset"UTF-8";
.Second-Header, .row, sub, sup {
    position:relative
}

.contact ul, ul, ul.proficient {
    list-style-type:none
}
.menubutton, html {
    -webkit-text-size-adjust:100%
}
 .menubutton, .row {
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none
}

body{
    margin:0;
    padding:0;
    border:0
}

html {
    height:100%;
    -ms-text-size-adjust:100%
}
body {
    min-height:100%
}button, html input[type=button], input[type=reset], input[type=submit] {
    cursor:pointer;
    -webkit-appearance:button
}
input[type=radio], input[type=checkbox] {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box
}
textarea {
    overflow:auto
}
::selection {
    background:#e94378;
    color:#fff
}
::-moz-selection {
    background:#e94378;
    color:#fff
}
img::selection {
    background:0 0
}
img::-moz-selection {
    background:0 0
}
@media screen and (max-width:1px) {
    body {
        font-size:(@font-size + 2)/16*1em
    }
}
html body {
    width:100%;
    background-color:#50b796;
    height:100%
}
body {
    -webkit-tap-highlight-color:rgba(255, 0, 0, .62);
    font:100%/1.5 serif
}
@media (min-width:600px) {
    body {
        font:112.5%
    }
}
::-webkit-scrollbar, ::-webkit-scrollbar-thumb {
    width:7px;
    height:7px;
    border-radius:4px
}
::-webkit-scrollbar, ::-webkit-scrollbar-track-piece {
    background:#fff
}
::-webkit-scrollbar-thumb {
    background:#232323
}
::-webkit-scrollbar-button {
    display:none
}
.row {
    display:block;
    margin-bottom:1em;
    margin-top:5em;
    color:#000
}
.Second-Header {
    display:block;
    margin-bottom:5em;
    margin-top:4em;
    color:#fff
}
.Second-Header h2 {
    font-family:'Abril Fatface', cursive;
    font-size:2.5em;
    font-weight:400;
    color:fff
}
body, h1, h2, h3, h4, h5, h6 {
    font-size:1rem;
    font-weight:500;
    font-family:brandon-grotesque, brandon-grotesque, Futura, sans-serif
}
@media (max-width:888px) {
    .row {
        margin:3em 0 0
    }
}
@media (max-width:666px) {
    .row h2 {
        margin-top:1.5em
    }
}
@media (max-width:555px) {
    .row h2 {
        margin-top:1em
    }
}
.row h2 {
    font-family:'Abril Fatface', cursive;
    font-size:2.5em;
    font-weight:400;
    color:#000
}
@media (max-width:777px) {
    .row h2 {
        font-size:2em
    }
}
@media (max-width:666px) {
    .row h2 {
        font-size:1.8em
    }
}
@media (max-width:555px) {
    .row h2 {
        font-size:1.5em
    }
}
@media (max-width:444px) {
    .row h2 {
        margin-top:0;
        margin-bottom:0;
        font-size:1.3em
    }
}
@media (max-width:333px) {
    .row h2 {
        font-size:1.2em
    }
}
@media (max-width:222px) {
    .row h2 {
        font-size:1em
    }
}
.row h2 span:after {
    content:'The Man'
}
h1 {
    font-size:2.5em
}
h2 {
    font-size:1.875em
}
p {
    font-size:.875em
}
.My-Gems {
    width:100%;
    margin-top:-360px
}
@media screen and (max-width:444px) {
    .My-Gems {
        width:100%
    }
}
@media screen and (max-width:333px) {
    .My-Gems {
        width:100%
    }
}
.global-container {
    width:100%;
    position:relative;
    background-color:#fff
}
.content-container, .post-container {
    text-align:center;
    padding:0;
    width:100%;
    background-color:#50b796;
    height:100%;
    margin:0;
    position:relative
}
.content-container {
    min-height:600px;
    max-width:1359px
}
.post-container {
    z-index:0;
    top:400px;
    max-height:100%
}
.Well-Aligned {
    position:absolute;
    left:0;
    top:-280px;
    width:100%;
    height:600px;
    background-color:#fff;
    z-index:0;
    -webkit-transform:skewY(5deg);
    -moz-transform:skewY(5deg);
    -ms-transform:skewY(5deg);
    -o-transform:skewY(5deg);
    transform:skewY(5deg)
}
@media (max-width:999px) {
    .Well-Aligned {
        height:560px
    }
}
@media (max-width:777px) {
    .Well-Aligned {
        height:520px
    }
}
@media (max-width:666px) {
    .Well-Aligned {
        height:470px
    }
}
@media (max-width:555px) {
    .Well-Aligned {
        height:420px
    }
}
@media (max-width:333px) {
    .Well-Aligned {
        height:380px
    }
}
.Biographical-Content {
    z-index:99999;
    display:block;
    top:-350px;
    position:relative;
    -moz-transition:all .3s ease-out;
    -o-transition:all .3s ease-out;
    -webkit-transition:all .3s ease-out;
    transition:all .3s ease-out;
    font-family:brandon-grotesque, brandon-grotesque, Futura, sans-serif;
    width:65%;
    margin-left:auto;
    text-align:center;
    padding:0;
    margin-right:auto
}
@media (max-width:444px) {
    .Biographical-Content {
        top:-365px
    }
}
@media (max-width:333px) {
    .Biographical-Content {
        top:-375px
    }
}
.Biographical-Content p {
    margin-top:20px;
    padding:0;
    transition:all .3s ease-out;
    font-size:20px;
    line-height:2em
}
.Biographical-Content a, .Biographical-Content p {
    color:#fff;
    font-family:brandon-grotesque, brandon-grotesque, Futura, sans-serif;
    -moz-transition:all .3s ease-out;
    -o-transition:all .3s ease-out;
    -webkit-transition:all .3s ease-out
}
@media (max-width:1111px) {
    .Biographical-Content {
        width:70%
    }
    .Biographical-Content p {
        font-size:18px;
        line-height:1.8em
    }
}
@media (max-width:999px) {
    .Biographical-Content {
        width:75%
    }
    .Biographical-Content p {
        font-size:16px;
        line-height:1.6em
    }
}
@media (max-width:555px) {
    .Biographical-Content p {
        font-size:14px;
        line-height:1.4em
    }
    .Biographical-Content {
        width:80%
    }
}
@media (max-width:444px) {
    .Biographical-Content p {
        font-size:12px;
        line-height:1.4em
    }
    .Biographical-Content {
        width:85%
    }
}

.Biographical-Content a {
    cursor:pointer;
    border-bottom:2px solid #fff;
    transition:all .3s ease-out
}
.Biographical-Content a:hover {
    background-color:#e94378;
    color:#fff;
    transition:all .3s ease-out
}
.Biographical-Content a:hover, .item {
    -moz-transition:all .3s ease-out;
    -o-transition:all .3s ease-out`;
    -webkit-transition:all .3s ease-out
}
.Intro-Video, .step {
    overflow:hidden;
    position:relative;
    background-color:#fff
}
.step {
    width:75%;
    -webkit-background-size:cover;
    z-index:999999999999999;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-image:url(http://kadeem.london/Image/Kadeem-Laurie-Lisbon-min.jpg);
    margin:0 auto;
    text-align:center;
    background-repeat:no-repeat
}
.step:nth-child(odd) {
    -ms-transform-origin:top left;
    -webkit-transform-origin:top left;
    transform-origin:top left
}
.step:nth-child(even) {
    -ms-transform-origin:top right;
    -webkit-transform-origin:top right;
    transform-origin:top right
}
.step.out-view:nth-child(odd) {
    -ms-transform-origin:top left;
    -webkit-transform-origin:top left;
    transform-origin:top left;
    -moz-transform:rotate(5deg);
    -ms-transform:rotate(5deg);
    -webkit-transform:rotate(5deg);
    transform:rotate(5deg)
}
.step.out-view:nth-child(even) {
    -ms-transform-origin:top right;
    -webkit-transform-origin:top right;
    transform-origin:top right;
    -moz-transform:rotate(-5deg);
    -ms-transform:rotate(-5deg);
    -webkit-transform:rotate(-5deg);
    transform:rotate(-5deg)
}
.Kadeem-Logo {
    position:relative;
    top:0;
    width:100%;
    display:block
}
.Kadeem-Logo img {
    display:block;
    width:auto;
    max-width:100%
}
.Intro-Video {
    z-index:9999;
    width:100%;
    display:block
}
.video-box {
    height:100%;
    width:100%;
    position:relative
}
#video-container {
    height:100%;
    width:100%;
    overflow:hidden
}
@media (max-width:600px) {
    .Intro-Video {
        background-image:url(http://kadeem.london/Image/kadeem-bg-min.jpg);
        width:100%;
        background-size:cover
    }
    .video-box {
        visibility:hidden
    }
    #video-container {
        visibility:visible
    }
}
.hide, .overlay-hugeinc {
    visibility:hidden
}
video {
    position:absolute;
    z-index:0;
    background:url(http://kadeem.london/Image/kadeem-bg.jpg) no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover
}
video.fillWidth {
    width:100%
}
@media (max-width:600px) {
    video {
        visibility:hidden
    }
}
.item {
    text-align:center;
    transition:all .3s ease-out;
    float:left;
    position:relative;
    width:50%;
    height:100%
}
.item-hover, .item-hover .mask, .item-img, .item-info {
    width:100%;
    height:100%
}
.item-hover, .item-hover .mask {
    position:absolute;
    top:0;
    height:100%;
    left:0
}
.item-type-double .item-hover {
    z-index:5;
    -webkit-transition:all 300ms ease-out;
    -moz-transition:all 300ms ease-out;
    -o-transition:all 300ms ease-out;
    transition:all 300ms ease-out;
    opacity:0;
    cursor:pointer;
    display:block;
    text-align:center
}
.item-type-double .item-info {
    color:#fff;
    display:table;
    position:relative;
    z-index:5
}

.item-type-double .item-info div.mycell {
    vertical-align:middle;
    height:100%;
    display:table-cell
}
.item-type-double .item-info .headline {
    font-size:2.4em;
    font-family:'Proxima Nova' sans-serif;
    text-transform:uppercase;
    width:90%;
    margin:0 auto
}
@media (max-width:500px) {
    .item {
        width:100%;
        height:100%
    }
}
@media (max-width:888px) {
    .item-type-double .item-info .headline {
        font-size:1.8em;
        text-transform:uppercase;
        width:90%;
        margin:0 auto
    }
}
@media (max-width:666px) {
    .item-type-double .item-info .headline {
        font-size:1.4em;
        text-transform:uppercase;
        width:90%;
        margin:0 auto
    }
}
@media (max-width:444px) {
    .item-type-double .item-info .headline {
        font-size:1.3em;
        text-transform:uppercase;
        width:90%;
        margin:0 auto
    }
}
@media (max-width:390px) {
    .item-type-double .item-info .headline {
        font-size:.8em;
        text-transform:uppercase;
        width:90%;
        margin:0 auto
    }
}
@media (max-width:333px) {
    .item-type-double .item-info .headline {
        font-size:.6em;
        text-transform:uppercase;
        width:90%;
        margin:0 auto
    }
}
@media (max-width:222px) {
    .item-type-double .item-info .headline {
        font-size:.5em;
        text-transform:uppercase;
        width:90%;
        margin:0 auto
    }
}
.item-type-double .item-info .date {
    font-size:20px;
    font-family:Canter;
    text-transform:uppercase
}

@media (max-width:444px) {
    .item-type-double .item-info .date {
        font-size:16px;
        text-transform:uppercase
    }
}
@media (max-width:333px) {
    .item-type-double .item-info .date {
        font-size:10px;
        text-transform:uppercase
    }
}
.item-type-double .item-hover .mask {
    background-color:#000;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    opacity:.5;
    z-index:0
}
.item-type-double .item-hover:hover .line {
    width:90%
}
.item-type-double .item-hover:hover {
    opacity:1
}
.item-img {
    width:100%;
    z-index:0
}
.item-img img {
    width:100%;
    display:block
}

.hidden {
    opacity:0
}
.visible {
    opacity:1
}

.fixed-Me {
    float:right;
    position:fixed;
    bottom:-17px;
    left:10%;
    background-size:cover;
    z-index:999999999999999999;
    height:50%;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover
}
@media(max-width:550px) {
    .fixed-Me {
        visibility:hidden
    }
}
.menubutton {
    position:fixed;
    top:15px;
    right:20px;
    z-index:9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
    width:140px;
    height:40px;
    user-select:none;
    color:#1a1a1a;
    cursor:pointer;
    -webkit-font-smoothing:antialiased;
    -webkit-transition:opacity .35s;
    transition:opacity .35s
}
@media (max-width:1090px) {
    .menubutton {
        width:90px
    }
}
h3 {
    margin:0
}
<div class=global-container>
    <div class=Intro-Video>
        <div class=video-box>
            <div id=video-container>
                <video autoplay class=fillWidth>
                    <source src=Video/Trailer.mp4 type="video/mp4" />
                </video>
                <div class=Kadeem-Logo>
                    <img src=http://kadeem.london/Image/Kl_Wall-min.png alt=Kadeem-Laurie-Logo title="Kadeem Logo">
                </div>
            </div>
            <!-- Video Container -->
        </div>
        <!-- Video Box-->
    </div>
    <!-- Intro Video -->
    <div class=content-container>
        <div class=post-container>
            <div class=Biographical-Content>
                <div class="step out-view"></div>
                <!--Image-->
                <p>I go by the name of Kadeem Laurie and this is my brief portfolio. I am an events graduate currently developing an events marketing start-up. This website, which is responsive, was created from scratch using HTML, CSS and jQuery for the purpose of showcasing some of my digital proficiencies. I specialise in event management, digital content, SEO, marketing strategy, branding and front-end web design.</p>
                <p>Freedom of thought inspires me. I love conceptualising and seeing ideas evolve. I see myself as a marketeer who simply likes to make things look good, branding has thus always been my most favourable aspect of marketing. I studied event management in university and have organised a <a href=events.html> few events</a> of my own. I hope to integrate events within marketing strategy more. I like to ask the <a href="http://stackoverflow.com/users/1923610/kadeem-laurie?tab=profile" target=_blank>right questions</a> and find solutions from different perspectives.</p>
                <p>My favourite book is <a href=https://en.wikipedia.org/wiki/The_Prince>The Prince</a> by Nicolo Machievelli. My favourite dish is <a href=http://lifestyle.sapo.pt/sabores/receitas/arroz-de-marisco>Arroz De Marisco.</a>

                    <br>This website has been recently created so content is being added concurrently.</p>
            </div>
            <!--Biographical Content-->
            <div class=My-Gems>
                <div class=Second-Header>
                     <h2><hr class=lineout></h2>

                </div>
                <div class="item item-type-double">
                    <div class=item-img>
                        <img src=http://kadeem.london/Image/Money-Matters-Logo.png class=menukadeem title=Piggy-Box-Logo alt="Kadeem-Laurie-Money-Matters-Logo" />
                    </div>
<a class=item-hover href=designs.html>
<div class=item-info>
<div class=mycell>
<div class=headline>Designs</div>
</div>
</div>
<div class=mask></div>
</a>

                </div>
                <div class="item item-type-double">
                    <div class=item-img>
                        <img src=http://kadeem.london/Image/Metaphon-Fitness.jpg alt=Metaphon-Fitness title=Metaphon-Fitness alt=Kadeem-Laurie-Metaphon-Fitness style="width:100%" />
                    </div>
<a class=item-hover href=events.html>
<div class=item-info>
<div class=mycell>
<div class=headline>Events</div>
</div></div>
<div class=mask></div>
</a>

                </div>
            </div>
            <!--My Gems-->
        </div>
        <!--Post Container-->
    </div>
    <!--Content Container-->
    <footer class="goodbye">Hello there</footer>
</div>
<!-- Global Container-->
Tags:

2

Answers


  1. 0

    Just add position: relative to the footer in your CSS.
    The content div is also relatively positioned with z-index: 0. Hence it is coming over your footer. Adding just position: relative will make it appear above the image.

    Refer stacking rules here

    https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index

    Login or Signup to reply.
  2. 0

    You have several things going on here:

    First, you’re using floats for the images (.item) but not clearing them. Anytime you float an image or any other object you take it out of the normal flow. This means that the parent container doesn’t know they exist and therefore doesn’t make space for them.

    There are several ways to address this issue – known as clearfix methods. In this case I’ve used the overflow property. Add overflow: auto to the parent .post-container.

    .post-container {  overflow: auto;  }

    The second issue is that this same container (.post-container) is relatively positioned 400px off the top of its normal (static) position.

    .post-container { top: 400px; }

    This pushes the container down past the footer element by 400px.

    To compensate for this downward shift, the footer element will need to move 400px, as well.

    .goodbye { bottom: -400px; }

    So with the clearfix and some positioning, your footer ends up at the bottom of the .global-container.

    https://jsfiddle.net/xc77ebkz/2/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search