CODEWITHSUNDEEP
htmlcss
Timo002
Timo002

Reputation: 3208

CSS layout footer not on bottom of browser

At the moment I'm working on a HTML layout and can't figure why the result isn't what I want. See the image below where the red arrow shows the space that shouldn't be there. The white part of the footer should be on the bottom of the browser.

padding/margin which shouldn't be there

I tried almost everything and I think the issue is with css of the following HTML:

<ul class="footer-trust">

If I remove this from the HTML than the footer is on the bottom of the page and not hanging about 50px above it. I posted the HTML on jsfiddle, see the link here: http://jsfiddle.net/Cb4Jy/

I hope someone know the fix because I'm struggling a couple of hours with it and just don't see it anymore!

Upvotes: 0

Views: 135

Answers (3)

Axel
Axel

Reputation: 10772

Your markup and techniques were a bit overdone, which in turn results in making these types of issues more difficult to debug.

I've cleaned up your code, removed unnecessary nested divs, and replaced the simple effects (drop shadows) using CSS techniques. This is a much cleaner, and adaptable approach.

http://jsfiddle.net/Cb4Jy/10/

To implement the sticky footer, I've leveraged the methods outlined on this page: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

HTML:

<body>
    <div id="wrapper">    
        <div id="top">Candy canes croissant gingerbread jelly beans.</div>
        <div id="container">
            <div class="content">Unerdwear.com chocolate cake dragée cotton candy cheesecake marzipan gummies marzipan. Unerdwear.com tiramisu danish topping marshmallow bear claw macaroon jujubes. Chocolate cake applicake carrot cake croissant muffin soufflé croissant cake apple pie. Gingerbread powder jelly soufflé. Lemon drops sweet roll lollipop caramels caramels. Soufflé wafer jelly beans macaroon carrot cake gummi bears macaroon. Tootsie roll soufflé biscuit toffee fruitcake. Gingerbread macaroon oat cake fruitcake chocolate bar applicake icing chocolate cake. Cookie icing chocolate bar oat cake cupcake candy. Gummi bears cake oat cake soufflé liquorice dragée sweet liquorice. Candy lollipop icing. Apple pie sesame snaps lollipop. Bear claw bear claw oat cake muffin lemon drops sweet danish. Marshmallow gummies halvah cheesecake jelly-o gummi bears dragée. Candy canes croissant gingerbread jelly beans. Pastry bear claw gingerbread fruitcake. Icing brownie tiramisu. Macaroon carrot cake ice cream biscuit sugar plum muffin. Chocolate pastry cheesecake. Croissant cotton candy sweet unerdwear.com chocolate bar. Tootsie roll cookie topping caramels applicake danish tootsie roll. Biscuit macaroon candy soufflé cotton candy caramels. Carrot cake pudding toffee cotton candy jelly. Liquorice marzipan toffee bonbon sugar plum. Cupcake gummi bears cake powder topping cake dessert jelly. Wafer wafer jujubes icing donut bear claw sesame snaps oat cake candy canes. Oat cake cotton candy jelly beans. Cotton candy topping jujubes cookie gummi bears. Gummi bears tootsie roll cheesecake candy jelly-o sugar plum. Cake biscuit lollipop icing ice cream tootsie roll carrot cake cookie pie. Brownie dragée wafer macaroon cotton candy topping cupcake. Biscuit dragée dragée cookie. Tart chocolate candy jelly jujubes cheesecake cupcake cheesecake chocolate. Gummies cheesecake tart pie jelly danish. Tiramisu cotton candy lemon drops tart muffin candy tootsie roll candy canes carrot cake. Marshmallow jelly-o gingerbread. Lollipop tootsie roll wafer sugar plum sesame snaps marzipan powder chocolate cake. Cake chocolate bonbon. Dragée donut caramels. Sweet chocolate bar sweet roll halvah sweet.</div>
        </div><!-- end #container -->            
        <footer id="footer" class="content">
            <ul class="footer-trust">
                <li><a href="#" class="trust-link trust-1"></a>

                </li>
                <li><a href="#" class="trust-link trust-2"></a>

                </li>
                <li><a href="#" class="trust-link trust-3"></a>

                </li>
                <li><a href="#" class="trust-link trust-4"></a>

                </li>
            </ul>
            <div class="footer-agreement">
                <p>Marshmallow jelly-o gingerbread. Lollipop tootsie roll wafer sugar plum sesame snaps marzipan powder chocolate cake</p> <address>Copyright &copy; Carrot cake pudding toffee cotton candy jelly. </address>
            </div>
        </footer>
    </div><!-- end #wrapper -->
</body>

CSS: 

html, body, #wrapper {
    height: 100%;
}

body {
    margin: 0px;
    padding: 0px;
    background-color: #f3f3f3;
    height: 100%;
    font-family:Arial, Geneva, Helvetica, sans-serif;
    font-size: 12px;
}

p {
    margin:0px;
}

.content {
    background: #FFF;
    padding: 15px;
    -webkit-box-shadow: 0px 0px 20px rgba(50, 50, 50, 0.6);
    -moz-box-shadow:    0px 0px 20px rgba(50, 50, 50, 0.6);
    box-shadow:         0px 0px 20px rgba(50, 50, 50, 0.6);
}

#wrapper {
    padding: 0 30px;
    width: 1000px;
}

#container {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px;
}

#container:after {
    display: block;
    height: 50px;
    content: "";
    width: 100%;
}

#container .content { margin: 50px 0 20px; }

#footer {
    display: block;
    height: 50px;
    margin: 0 auto;
}

#top {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 30px;
    background-color: white;
    z-index: 1;
    box-shadow: 0px 0px 15px 0px gray;
}

ul.footer-trust {
    list-style: none;
    margin: 0px;
    padding: 0px;
}
.footer-agreement {
    text-align: right;
    font-size: 10px;
}
ul.footer-trust li {
    float: left;
    padding-right: 23px;
}
.trust-link {
    background: url('https://dl.dropboxusercontent.com/u/60346690/footer-logos.png') no-repeat;
    display: block;
}
.trust-1 {
    width: 74px;
    height: 23px;
    background-position: 0 0;
}
.trust-2 {
    width: 25px;
    height: 23px;
    background-position: -75px 0;
}
.trust-3{
    width: 52px;
    height: 23px;
    background-position: -101px 0;
}
.trust-4{
    width: 21px;
    height: 23px;
    background-position: -154px 0;
}

Upvotes: 0

Pat Dobson
Pat Dobson

Reputation: 3299

Change the following attributes:

#service-footer { height: 261px; }
#subfooter { top: 0; }

Fiddle here: http://jsfiddle.net/Cb4Jy/7/

Upvotes: 1

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

That is because of the padding or margins below the footer.

If you want to remove it, go to Developer Tools and look for any margins being applied to it.

Or you can use position and always align in to the bottom using bottom: 0 and position: absolute.

Upvotes: 0

Related Questions