Positions html/css

Question

I have some problems with sticking my footer to the bottom of the page. At the moment when I preview it in Internet Explorer, it is centered under the rest of the content, but not at the bottom. When I want to preview it in Chrome, it keeps standing next to some other content. Could someone explain to me why and how to fix this? Below, I've included some code for reference:

HTML:

<footer class="mainFooter">
                <p>Copyright &copy; <a href="https://www.google.nl">www.baica.nl </a></p>
            </footer>

CSS:

.mainFooter{
    display:block;
    width:100%;
    height:50%;
    margin:20% auto;
    color:yellow;
    text-align: center;
}

http://ryanfait.com/html5-sticky-footer/ Try this solution. – nCore Mar 20 '14 at 18:37 — nCore, Mar 20 '14 at 18:37

score 0 · Answer 1 · answered Mar 20 '14 at 18:44

Where is the rest of the html. The footer I assume is in a container and that container has to span the height of your window using something like

min-height: 700px

then in your css you set the

display: table-cell; vertical-align: bottom;

or position: absolute; bottom: 0;

score 0 · Accepted Answer · answered Mar 20 '14 at 18:49

If I understand your question properly, you want to make your footer stick to the bottom of the page no matter the height of its contents. To achieve this you can use this CSS

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
.footer, .push {
    height: 4em;
    color:yellow;
    text-align: center;
}

Then adjust your page to follow this HTML structure

<div class="wrapper">
    <p>Your website content here.</p>
    <div class="push"></div>
</div>
<div class="footer">
    <p>Copyright (c) 2014</p>
</div>

You also mentioned that your footer floats to one side or the othr beside other content. I am assuming this is on a multi-column layout. In which case you should utilize clear: both

.footer, .push {
    clear: both;
}

TYVM, I fixed it with your help! – Joal Mar 20 '14 at 18:55 — Joal, Mar 20 '14 at 18:55
@Joal Great! Do you mind accepting my answer? – gillytech Mar 20 '14 at 19:02 — gillytech, Mar 20 '14 at 19:02

score 0 · Answer 3 · answered Mar 20 '14 at 19:02

0

look into the browser prefixes for your css code, and style it for each browser to prevent errors in the rendering of your html/css. Take a look at css3 schools browser support for more information, hope this helps

answered Mar 20 '14 at 19:02

7888

72
1
1
6

Positions html/css

3 Answers3