Footers position doesn't change

Question

For some reason I'm having great difficulties with my footer on my website I'm working on.. The footer is supposed to be at the bottom of the page and I want to be able to set a margin on how many % there should be between.

For some reason; that doesn't work..

My website

I'm not sure why it's doing this..
Here's the footer-CSS:

.footer {
    position: absolute;
    z-index: 99;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
}
.footerContent  {
    width: 95%;
    float: right;
}
.seperator {
    width: 95%;
    height: 5px;
    overflow: hidden;
    float: right;
    position: absolute;
    background: linear-gradient(to right, #9CD127,#006A91);
}
.footer p {
    font-family: DINOTMedium;
    position: relative;
    font-size: 26px;
}
.footer a, .footer a:visited {
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    font-family: DINOTLight;
    font-size: 18px;
    transition: .1s;
    margin-right: 30px;
    position: relative;
}
.footer a:hover {
    color: #E88A4F;
}

.footer p.disclaimer {
    color: white;
    font-size: 16px;
    font-family: DINOTLight;
    position: relative;
}

And this is the content-css:

.container {
    position: absolute;
    top: 0;
    width: 90%;
    left: 10%;
    margin: auto;
    height: 100%;
}
.boxwrapper {
    width: 100%;
    position: absolute;
    top: 70%;
    margin-bottom: 15%;
}
.box-A {
    float: left;
    width: 46%;
    background: #0095D3;
    padding: 1% 2%;
}
.box-B {
    float: left;
    width: 46%;
    background: #63A33B;
    padding: 1% 2%;
}
.boxwrapper h1 {
    color: white;
    font-family: DINOT;
    font-size: 150%;
}
.boxwrapper p {
    color: white;
}
.boxwrapper a, .boxwrapper a:visited {
    color: white;
    text-decoration: none;
    font-size: 120%;
    transition: 0;
}
.boxwrapper a:hover {
    text-decoration: underline;
}
.boxwrapper a:hover  .box-A {
    background:black;
}

And finally; the HTML

<div class="container">

        <div class="panel">
            <div class="content">
                <h1>Att driva företag och samtidigt skapa en hemsida utan tillräcklig kunskap är inte lätt!</h1>
                <a href="">låt oss hjälpa!</a>
            </div>
        </div>

        <div class="boxwrapper">
            <div class="box-A">
                <h1>Rubrik 1</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis diam vitae ex laoreet congue eget imperdiet ante. Mauris mollis non mauris vel eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum tempus est non arcu molestie luctus. In sed dignissim est. Etiam a venenatis sem.</p>
                <p><a href="">Läs mer &raquo;</a></p>
            </div>
            <div class="box-B">
                <h1>Rubrik 2</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis diam vitae ex laoreet congue eget imperdiet ante. Mauris mollis non mauris vel eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum tempus est non arcu molestie luctus. In sed dignissim est. Etiam a venenatis sem.</p>
                <p><a href="">Läs mer &raquo;</a></p>
            </div>
        </div>

        <div class="footer">
            <div class="footerContent">
                <p>
                    <a href="https://facebook.com/ecoroundwebb">Facebook</a>
                    <a href="https://instagram.com/ecoroundwebb">instagram</a>
                    <a href="https://www.linkedin.com/company/ecoround-webbyr%C3%A5">linkedin</a>
                </p>

                <p class="disclaimer">
                    &copy; EcoRound Webbyrå
                </p>

                <br /><div class="seperator"></div><br />

                <p>&lt;/ECORND></p>

            </div>
        </div>

    </div>

Does anyone have any idea why it's acting like this? I set the margin-bottom on the blue boxes' wrapper to 15% and the actual page gets longer, but the footer won't move..

I basically want a 15% margin between the two colored boxes and the footer.

Answer 1

As previously mentioned, I would recommend some changes to relativepositioning including: container, panel, boxwrapper, footer. But also, so everything falls into place, add the following css:

body {
    margin: 0;
}

.container {
    margin: 0;
}

Answer 2

If you set an element to position Absolute. It will remove the space it is taking up on the page. So elements placed after that will appear at the top of the screen.

Setting the position to relative will let it keep its proportioned width and height on the screen and push content underneath it as normal.

Your absolute positioned .panel causes your .boxwrapper to display underneath that. And then your .footer

Change .panel to position relative, and remove .boxwrapper's "top". That will sort your page out.

Hope this helps.

Answer 3

Issue in position style properties.

Remove style Properties position: absolute; of class container, panel, boxwrapper, footer.