-4

I have a similar issue to White space appears below sticky footer, only in PHP and have tried various solutions similar to Footer position issue - CSS

My footer was centered below my content but when this content was too short there was a lot of white space. I amended my CSS to move the footer to the bottom of the page unless the content was longer but it now positions the footer over the content and to the left whereas I want it center and at the bottom. The page also looks different between IE8 and Chrome.

My PHP page results in the following HTML:

<html><head><link rel="stylesheet" type="text/css" href="stylesheet.css"></head>
<body><div id="container"><div id="header"><p>Text</p></div>
<div id="navbar"><ul><li>1</li><li>2</li><li>3</li></ul></div>
<div id="content"><p>test</p></div><br />
<div id="footer"><hr><p><a href="address" <img src="picture" alt="">text</a></p>
<p>Copyright &copy; text</p></div>
</body>
</html>

and the CSS:

body {
font-size:100%;
font-family:Arial, Helvetica, sans-serif;
font-size:1.075em;
background-image:url(images/gradient.jpg);
background-repeat:repeat-x;
margin:0;
padding:0;
height: 100%;
}
#container {
font-family:Arial, Helvetica, sans-serif;
font-size:1.075em;
min-height:100%;
position:relative;
height:100%;
}
#content {
margin-left:200px;  
margin-right:100px;
padding:18px; 
padding-bottom:128;
}
#footer {
clear:both;
margin-left:auto;  
margin-right:auto;
text-align:center;
position:absolute;
bottom:0;
height:128px;
width:100%;
}
#navbar {
position:fixed;
float:left;
width:180px;
margin:0;
padding:6px;
}
#navbar ul {
margin:0;
padding:0;
list-style:none;
}
#navbar li {
margin:0;
padding:1px;
display:block;
list-style:none;
font-family:"Stencil", Helvetica, sans-serif;
text-align:center;
}
Jason Stallard
  • 349
  • 2
  • 15
  • @donald123 The OP indicates this is the resulting HTML markup. – DreamTeK Dec 18 '14 at 13:38
  • Yes. It is PHP made of a couple of includes. I thought it easier to provide the resulting HTML to debug the CSS. – Jason Stallard Dec 20 '14 at 20:28
  • I've tried to edit my question to avoid more down votes but it would be useful to understand why it has the existing five. – Jason Stallard Mar 15 '18 at 15:57
  • 1
    It's 2018 now you are unlikely to ever find out why. The question seems fine in its current state but you might want to close it to recoup your losses. I understand the frustrations when people like to critisice without reason but some people are just to righteous to bother. +1 from me. – DreamTeK Mar 16 '18 at 09:53
  • Thanks, @Obsidian, I wouldn't want to deprive JakobMillah of his answer. I was just worried about being able to ask questions in the future. – Jason Stallard Mar 16 '18 at 14:16
  • 1
    Stallford I recommend you follow these rules. Ensure your question is concise and understandable. Do not incite opinon (only facts). Always provide code examples of what you have so far and finally except that some people are just arseholes. =) – DreamTeK Mar 16 '18 at 14:40

1 Answers1

0

Set 

#container {min-height:400px;}

and your problem should be fixed.

JakobMiller
  • 323
  • 6
  • 19
  • I tried your suggestion and it didn't make any difference. I then noticed that I had missed px from padding-bottom which fixed my issue. – Jason Stallard Dec 19 '14 at 15:51
  • Alright. Try avoiding such static way of making layouts in the future if you ever get to make websites. + fix your
    to look like
    , since you are currently not following HTML Transitional. :)     – JakobMiller Dec 19 '14 at 16:54
  • I just had another look in to using
    and http://stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br plus a few others seem to indicate that it is. As a result of your prompt though I will take out the
    s as it is laziness on my part and replace with padding. Any additional constructive criticism is appreciated.     – Jason Stallard Dec 22 '14 at 10:18
  • I've been working on getting the footer in the right place for a few days now. Though I fixed the centereing issue by adding that missing px it is still showing white space below the footer. It is driving me crazy. – Jason Stallard Dec 22 '14 at 10:25
  • Could you add that code to JSFiddle or something? I think I can solve that issue. – JakobMiller Dec 22 '14 at 18:35
  • I am unused to using this sort of tool as I work primarily in Notepad. I created myself a JSFiddle account as PHPFiddle would not allow me to save. I put two of my three includes on http://jsfiddle.net/FiveBs/7rnxmfpg/ but didn't add my database password file. – Jason Stallard Dec 29 '14 at 12:48
  • I have been looking into this for approximately half hour every day and though the solution did include the suggestion from @thommy-jonasson it needed something more. I used http://www.cssstickyfooter.com/using-sticky-footer-code.html and found a missing } further along in the css that I had accidentally removed in my edits and it suddenly started working. Always check your code for simple omissions. – Jason Stallard Feb 13 '15 at 14:08