Member Avatar for jelly46

Why is my footer not appearing at the bottom properly. I applied clear:both; yet noting.

Please can you help?

Thanks

  • 2 Contributors
  • 4 Replies
  • 120 Views
  • 5 Hours Discussion Span
  • Latest Post Latest Post by jelly46

Dani AI

Generated

Quick summary and what to check (short)

’s footer was sitting behind the bottom images and ’s sticky-footer template fixed the symptom. Common root causes not fully discussed in the thread: floated children that aren’t contained by their parent, absolutely positioned children (they don’t increase parent height), a footer that is itself floated/absolutely positioned, or a sticky-footer implementation where the footer height in CSS doesn’t match the real height. Use the browser DevTools to inspect the computed height and box outlines as the first step.

Simple, immediate fixes to try

  • Add a clearfix to the container that holds the floated thumbnails (or to #content) so the parent grows to contain them:
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
  • Or create a new block formatting context on the parent:
#content { overflow: auto; /* or overflow: hidden; watch for clipped content */ }
  • Make sure the footer itself is not floated or position:absolute; a floated footer can defeat clear. Temporarily add a visible border/background to each section to confirm which box is collapsing.

A modern alternative (recommended for new projects)

  • Use Flexbox for a reliable sticky footer. Set the page to a column flex and let the main content grow:
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; }
main { flex: 1 0 auto; }   /* main is the page content area */
footer { /* normal footer styles */ }

Quick troubleshooting checklist

  • Inspect whether images are absolutely positioned (they won’t expand the parent).
  • Check footer CSS for float, position, negative margin, or mismatched footer height if using a negative-margin sticky-footer.
  • Toggle overflow:auto and/or add the .clearfix to see which fix resolves it.

Further reading: CSS-Tricks — Clearfix and MDN — position for why positioned elements are removed from flow.

Recommended Answers

All 4 Replies

Member Avatar for JorgeM

I looked at the site, I don't see what appears to be a footer. I'll look at the source code once I'm in front of a PC as I assume that i'll be able to see an element that has an ID or class that resembles a footer.

In the mean time, this link may help you with regard to Pushing a Footer to the Bottom of the Web Page

Edited by JorgeM
Member Avatar for jelly46

Hello JorgeM

If you closely the footer is behind the two bottom images.

Thanks for your help.

Member Avatar for JorgeM

OK, so now I see the footer text... In any case, what I did was basically take your content and include it in the template (link above) that I use when I want to create a page with a "sticky" footer. I tested this code on my local machine and it appears to be OK. feel free to tweak it if you find a slight problem as I really didn't have time to validate your styling. When it comes to the sticky footer, margins, padding, floats, etc.. can cause the footer not to stick as expected...

remove the <base> element that I included in the <head> section, just needed that to be able to access your jQuery and images. In addition, remove/modify the background-color I applied on the footer. needed that to see if the footer was actually on the bottom.

<!DOCTYPE html>
<html>
<head>
<base href="" />
<style>
    html, body {height: 100%;margin: 0;background:#000;}
    h1{color:#787979;}

    #wrapper {min-height:100%;margin: 0 auto -75px;}
    #header {min-width:100%;height:150px;float:left}
    #headerContent {width:1112px;margin:0 auto;}
    #separator, #footer {height:180px;}
    #content {margin:0 auto;width:1112px;padding:15px;}
    #footer {min-width:100%;float:left;color:#fff;background-color:#7f7f7f}
    #footerContent {margin: 0 auto;width:1112px;padding:10px 0px;}

    .address {color:#787979; text-align:right; font-size:12px; float:right; line-height:190%;}
    #gallery {background:#FFF; height:450px;}
    #navcontainer {float:right; margin-top:15px;}
    #navlist li { display: inline; list-style-type: none;  }
    #navlist li a:link {text-decoration:none; color:#787979; font-size:12px;  margin-left:25px;}
    .smallpics {width:545px; height:180px; float:left; margin-top:40px;}
    .s-pic-b,.s-pic-d {margin-left:20px;}
    .s-pic-c,.s-pic-d {padding-top:50px;}
    div.fadehover {position: relative;  }
    img.a {position: absolute;  left: 0;top: 0; z-index: 10; }
    img.b {position: absolute;  left: 0;top: 0; }

</style>

<script type='text/javascript' src='jquery-1.9.1.js'></script>
<script type='text/javascript'>
    $(document).ready(function(){
        $("img.a").hover(
            function() {
                $(this).stop().animate({"opacity": "0"}, "slow");
            },
        function() {
            $(this).stop().animate({"opacity": "1"}, "slow");
        });
    });
</script>

</head>
<body>
  <div id="wrapper">
     <div id="header">
         <div id="headerContent">
            <p><span class="address">Whetstone - 020-8888-8888 <br />Kensington - 020-8888-8888</span></p>
            <img src="logo.png" />
            <div id="navcontainer">
                <ul id="navlist">
                <li><a href="#">Bespoke</a></li>
                <li><a href="#">Contemporary</a></li>
                <li><a href="#">Achitecture &amp; Interiors</a></li>
                <li><a href="#">Management &amp; Build</a></li>
                <li><a href="#">Contact Us</a></li>
                </ul>
            </div>  
         </div>
     </div>
     <div style="clear:both;"></div>
     <div id="content">
            <div id="gallery"></div>

            <div class="smallpics s-pic-a">
                <h1>Bespoke</h1>
                <div class="fadehover">
                    <a href=""><img src="a-bw.png" alt="" class="a" /><img src="a-color.png" alt="" class="b" /></a>
                </div>
            </div>

            <div class="smallpics s-pic-b">
                <h1>Contemporary</h1>
                <div class="fadehover">
                    <a href=""><img src="b-bw.png" alt="" class="a" /><img src="b-color.png" alt="" class="b" /></a>
                </div>
            </div>

            <div class="smallpics s-pic-c">
                <h1>Achitecture &amp; Interiors</h1>
                <div class="fadehover">
                    <a href=""><img src="c-bw.png" alt="" class="a" /><img src="c-color.png" alt="" class="b" /></a>
                </div>
            </div>

            <div class="smallpics s-pic-d">
                <h1>Management &amp; Build </h1>
                <div class="fadehover">
                    <a href=""><img src="d-bw.png" alt="" class="a" /><img src="d-color.png" alt="" class="b" /></a>
                </div>
            </div>
            <div style="clear:both;"></div>   


     </div>
     <div id="separator"></div>
  </div>
  <div id="footer">
      <div id="footerContent">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  </div>
</body>
</html>
Member Avatar for jelly46

JorgeM thank you mate, thank you so much.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.