Footer Issue!

Report · May 06, 2017

Having a bit of a problem with getting the footer on a site I am building to stay at the bottom of the content and position itself depending on the content on each page.

I had made a template with the wrapper, header and footer divs to use for each page but was only able to achieve putting the footer a set height down the page so pages with little content had a large gap underneath and longer pages had the footer stuck halfway up in the middle of content.

I have now tried to search and find a responsive solution but it seems to have only made the problem worse - the footer is positioned at the top of the page and pushed all the content on each page off of the visible area seemingly.

The web address is uklivesound.000webhostapp.com

I have taken the 'about us' page as an example for the HTML and CSS below:

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>UKLS - UK Live Sound - Music Rehearsals, Recording, Event Hosting, Equipment Hire, Sale and Repair in Reading</title>
<link href="styles/footer.css" rel="stylesheet" type="text/css">
<link href="styles/mainbody.css" rel="stylesheet" type="text/css">
<link href="styles/header.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
    <div id="logo"><a href="https://uklivesound.000webhostapp.com/index.html"><img src="images/NavBar/Logo.png" alt="UK Live Sound" width="280" height="280"/></a>
</div>
    <div id="header"> Unit 29, Milford Road, Reading, RG1 8LG <br>
<br>
Tel: 07737 661209 <br>
<br>
Email: </div>
<div id="social"> <a href="https://www.facebook.com/UKLiveSound/?fref=ts" target="_blank"><img src="images/Social/facebooklogo.png" width="50" height="50" alt="Facebook"></a> <img src="images/Social/twitterlogo.png" width="50" height="50" alt="Twitter"/> <a href="https://www.instagram.com/explore/locations/752251117/" target="_blank"><img src="images/Social/instagramlogo.png" width="50" height="50" alt="Instagram" data_temp_dwid="1"></a>
    </div>
        <div id="navbar">
   <nav>
    <meta charset="utf-8">
    <ul>
      <li><a href="https://uklivesound.000webhostapp.com/aboutus.html">About Us</a></li>
      <li><a>Rehearsals</a>
        <ul>
          <li><a href="https://uklivesound.000webhostapp.com/liveroom.html" class="sub">Live Room</a></li>
          <li><a href="https://uklivesound.000webhostapp.com/isolationroom.html" class="sub">Isolation Room</a></li>
        </ul>
      </li>
      <li><a>For Hire</a>
        <ul>
          <li><a href="https://uklivesound.000webhostapp.com/hirepackages.html" class="sub">Event Packages</a></li>
          <li><a href="https://uklivesound.000webhostapp.com/largeevents.html" class="sub">Large Events</a></li>
          <li><a href="https://uklivesound.000webhostapp.com/equipmenthire.html" class="sub">Equipment</a></li>
          <li><a href="https://uklivesound.000webhostapp.com/bandhire.html" class="sub">Bands</a></li>
        </ul>
      </li>
      <li><a>Recording</a>
        <ul>
          <li><a href="https://uklivesound.000webhostapp.com/audiorecording.html" class="sub">Audio</a></li>
          <li><a href="https://uklivesound.000webhostapp.com/videorecording.html" class="sub">Video</a></li>
        </ul>
      </li>
      <li><a>Other Services</a>
        <ul>
          <li><a href="https://uklivesound.000webhostapp.com/buyandsell.html" class="sub">Buy/Sell</a></li>
          <li><a href="https://uklivesound.000webhostapp.com/repairs.html" class="sub">Repairs</a></li>
        </ul>
      </li>
      <li><a href="https://uklivesound.000webhostapp.com/contact.html">Contact Us</a></li>
    </ul>
    </nav>
</div>
<div id="main">

    <h1 span style="background-color: #71aace">About UKLS</h1>
<p> UK Live Sound (UKLS) is a professional audio/visual equipment company based in Reading, Berkshire, formed in 2013 by professional musician & sound engineer Nico Di Cillo - bringing over 25 years' experience in the industry. <br>
    UKLS offer quality solutions for live events and equipment hire, and a studio providing high end recording and rehearsal facilities to cater for any musician, band or musical project. <br>
    Nico's vast experience with sound engineering includes work with notable artists including Jamiroquai, Paul Carrack, Mike & The Mechanics, It Bites, The Stranglers, Paloma Faith & many more. <br>
    Having worked for the likes of Sonus in Rome, Hookend Manor and SARM East Studios, the concept was to ultimately bring together all of the knowledge and experience gained to build a company that would satisfy the needs of the local music and arts scene. <br>
    UK Live Sound has previously provided sound reinforcement, lighting, staging, power etc to various events including:
<p class="eventlist">
       <a href="http://www.marvellousfestivals.com" target="_blank"><img src="https://uklivesound.000webhostapp.com/images/aboutus/marvellouslogo.png" title="Marvellous Festival" alt="Marvellous Festival"</a>
    <a href="http://www.partyparkhurst.co.uk" target="_blank"><img src="https://uklivesound.000webhostapp.com/images/aboutus/partyintheparkhurstlogo.png" title="Party In The Park Hurst" alt="Party In The Park Hurst"</a><br>
    <a href="http://www.hurstrocktoberfest.org.uk/" target="_blank"><img src="https://uklivesound.000webhostapp.com/images/aboutus/hurstrocktoberfestlogo.png" title="Hurst Rocktoberfest" alt="Hurst Rocktoberfest"</a>
    <a href="http://www.rocknale.co.uk/page.php?pid=2" target="_blank"><img src="https://uklivesound.000webhostapp.com/images/aboutus/cavershamrockalelogo.png" title="Caversham Rock & Ale Festival" alt="Caversham Rock & Ale Festival"></a>
</p></span>
</div>

</div>
        <div id="footer">
    <hr>
    Website Designed & Created By Jon Benham 2017 © All Rights Reserved<br>
        <a href="mailto:jbenham10@hotmail.co.uk">Contact Me</a> for Website Design
        </div>
    </div>
</body>
</html>

CSS

#wrapper {
    max-width: 100%;
    min-height: 100%;
    position: relative;
    overflow-y: hidden;
    overflow-x: hidden;
}
html {
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
}
body {
    height: 100%;
    margin:0;
    padding:0;
}
#main {
    font-family: sans-serif;
    color: #FFFFFF;
    font-size: 28px;
    position: absolute;
    width: 100%;
    float: left;
    margin-top: 5%;
    max-width: 90%;
    padding: 10px;
    padding-bottom:60px;
    min-height:60%;
    }
#isoroom {
    font-family: sans-serif;
    color: #FFFFFF;
    font-size: 28px;
    position: absolute;
    width: 100%;
    float: left;
    margin-top: 5%;
    max-width: 90%;
    margin-left: 5%;
    min-height: 60%;
}
h1 {
    text-align:center;
    font-family:impact;
    font-size: 50px;
    color: #FFFFFF;
    position: relative;
    font-weight:100;
}
.form {
    font-family: sans-serif;
    font-size: 30px;
    color: #FFFFFF;
    position: absolute;
    border-color: #FFFFFF;
    width:20%;
    border-width: 1px;
    left:5%;
}
.eventlist {
    font-family: sans-serif;
    color: #FFFFFF;
    font-size: 36px;
    position: absolute;
    width: 100%;
    float: left;
    text-align: center
}
table {
    width: 80%;
    max-width: 80%;
    border: 1px solid white;
    position:relative;
}
th {
    text-align: center;
    height: 10px;
    font-weight: bold;
    border: 1px solid white;

}
td {
    text-align: center;
    height: 5px;
    border: 1px solid white;
}
iframe {
    position: relative;
    left: 56%;
    top: 20%;
}
#frontimg {
    position: relative;
    left : 56%;
}
#header {
    font-family: Impact, Haettenschweiler, 'Franklin Gothic Bold', 'Arial Black', 'sans-serif';
    font-size: 30px;
    color: #FFFFFF;
    text-align:center;
    position: relative;
    padding:3%;
    font-weight:100;
}
hr {
    color: #FFFFFF;
    width: 100%;
}
#logo {
     position: absolute;
     float:left;
     top:0%;
     left:0%;
    height:10%;
    width:25%;
}
#social {
    position: relative;
    left: 80%;
    bottom: 20px;
    width: 160px;
}
#navbar * {
    -webkit-text-size-adjust: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    position: relative;
    font-weight:100;
}

body {background-color:#79c5f4;}
nav ul { list-style:none;
}
li:nth-child(1) {background-color:#71aace;}
li:nth-child(2) {background-color:#6c73b1;}
li:nth-child(3) {background-color:#d3c530;}
li:nth-child(4) {background-color:#82c845;}
li:nth-child(5) {background-color:#8f65a1;}
li:nth-child(6) {background-color:#d84e92;}
li:nth-child(7) {background-color:#444080;}
nav ul li {
    display:block;
    float:left;
    text-align:center;
    width:16.667%;
    position: relative;
    font-weight:100;
}
nav ul li:hover {background-color:white;}
nav a {
    display:block;
    height:100%;
    font-family:'Impact', sans-serif;
    font-size:2.0vw;
    color:white;
    text-decoration:none;
    color:white;
    position: relative;
    font-weight:100;

}
nav ul li ul {display:none;}
nav ul li:hover ul {display:block;}
nav ul li:hover :first-child:not(.sub) {color:black;}
nav ul li ul li {
    float:none;
    width:100%;
    position: relative;
    z-index:999;
    font-weight:100;
}
nav .sub:hover {color:black;}
#footer {
    color: #FFFFFF;
    font-size: 16px;
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
    text-align: center;
    width: 100%;
    bottom:0;
    height:60px;
    font-weight:100;
    position:absolute;
}

Report · May 06, 2017

Absolute positioning is no solution. And explicit height values are going to create problems as well.

Page height varies by content and the size of the device on which it is displayed.

People on smaller devices will still need to scroll down to see your footer. So it doesn't matter where it sits as long as it comes below the main content area.

My advice is to begin again with one of the Starter Pages inside DW. Any one you pick will place the footer naturally at bottom of content. Go to File > New (see screenshots.).

After you save your document, DW creates Assets folders in your local site.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · May 08, 2017

Thanks for the reply, I think I actually managed to fix by sitting and tweaking various different things after researching, the footer now sits at the bottom responsively to what content is on the screen

This is the new CSS I ended up with and it seems to work!

#footer {
    color: #FFFFFF;
    font-size: 16px;
    font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
    text-align: center;
    width: 100%;
    font-weight:100;
    position: relative;
    z-index: 10;
    height:3em;
    clear:both;
    bottom:0px;
}
html {
    overflow-x: hidden;
    position: relative;
    overflow-y: scroll;
    height:100%;
}
body {
    min-height: 100%;
    margin:0;
    padding:0;
}
#main {
    font-family: sans-serif;
    color: #FFFFFF;
    font-size: 28px;
    position: relative;
    width: 100%;
    margin-top:9%;
    padding:2%;
    padding-bottom:3em;
    z-index:1;
    }

Footer Issue!

1 Correct answer