footer is not going to the bootom of screen

  • Resolved CompletePT

    (@completept)


    13 years, 11 months ago

    guys can anyone help me with this issue? my footer position wants to sit under my left column div (which is through the body) instead of under the body.

    I can see i am going to have more of the same issue as my blog increases to grow, and start making more posts.

    My css is:

    html, body {
/* 	display:table; */
	height:100%;
	margin:0;
	padding:0;
	background-repeat:no-repeat;
	color:#FFF;
	z-index:2000;

	}

#page-background {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:-1;
	}

#header {
	padding-top:20px;
}

#primary,
#secondary {
	float: right;
	overflow: hidden;
	width: 25%;
}

#content {
	width: 100%;
	position:relative;
	z-index:1;
	padding-top:20px;
	font-family: Tahoma, Geneva, sans-serif;
	color:#FFF;
	border:1;
	border-color:#FFF;
	}

#body{
	float:right;
	width:50%;
	/* width:500px; */
	color:#FFF;
	border: medium;
	border-color:#FFF;
	padding-top:20px;
	margin-left:50px;
}

#sidebar{
	float:right;
	/*width:25%*/
	width:223px;
	padding-left:10px;
}
#table-headers {
	font-family:Arial, Helvetica, sans-serif;
	font-size:16px;
	padding-left:12px;
	color: #FFF;
	font-weight: bold;
}

.tablefont {
	font-size: 12px;
	font-family: Verdana, Geneva, sans-serif;
}

#footer {
	/* position:relative;
	clear:both;
	margin-left:250px;
	padding-top:20px;
	width:800px;
	bottom:0px; */
	clear:both;
	position: relative;
	bottom:0px;
	float:left;
	width:100%;
	border-top:1px solid #000;
}

    Thanks

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator Ipstenu (Mika Epstein)

    (@ipstenu)

    ?????? Advisor and Activist

    Put in a link to your blog, or your html up on pastebin – It could be a mis-ordered Div.

    Thread Starter CompletePT

    (@completept)

    thats was bade form…. derrr.. lol

    https://www.completept.com.au/blog

    i have to be honest it probably is going to be mis-ordered, i’ve only in the last few weeks moved away from using tables through my html- thats how long its been since i’ve had to code a page

    Thanks for your help

    Thread Starter CompletePT

    (@completept)

    my understanding of fivs and floating, is that you have to code them in the order in which they appear in both the css and html

    i.e

    #header{}
    #left-sidebar{float:right;}
    #body{float:right;}
    #right-sidebar{float:right;}
    #footer#{}

    div id=”header”
    div id=”left-sidebar”
    div id=”body”
    div id=”right-sidebar”
    div id=”footer”

    @completept

    Open up your footer.php using Appearance>editor

    and at the very top use </div> once so that it closes the sidebar div and then calls the footer.

    Thread Starter CompletePT

    (@completept)

    Thanks for your suggestion royalprince, the content div effectively acts as a wrapper sidebar is inside, and footer is on the outside.

    I tried adding the extra close on sidebar, but this didn’t work.

    any other suggestions? or obvious errors in my code… i’ve been looking at it for hours, pushing footer inside container, changing my call order.. i need an extra set of eyes- or a break!! lol ??

    @completept

    I still observe that the footer is called inside sidebar.

    Instead of closing the sidebar div, add a </div> on top of footer.php. Add 2 </div> tags if needed and see the change.

    or paste the code of footer.php here. use pastebin to enter the code.

    Alternatively, you can also set an absolute position of your footer and use the following code:

    #footer {
border-top: 1px solid black;
clear: both;
float: left;
position: absolute;
top: 1000px;
width: 100%;
}

    Thread Starter CompletePT

    (@completept)

    After a break, i was just about to msg you to tell you you were still wrong, BUT when i copied the code i saw the issue straight away.. do you see it?

    <div id="sidebar">
<table height="200px" align="center">
	<tr>
        <td>
        <table>
        	<tr>
            	<td width="223" style="font-family:Arial, Helvetica, sans-serif;font-size:16px; padding-left:12px; c
        	</td>
			</tr>
		</table>
</div>	 

<div id="footer">
<table width="800px" height="50px" align="center" border="1">
<tr style="font-family:Arial, Helvetica, sans-serif; font-size:14px; padding-left:12px; color: #FFF; font-weight: bold">
    <td colspan="3"> Testimonials: </td>
</tr>
<tr style="font-family:Arial, Helvetica, sans-serif; font-size:12px; padding-left:12px; color: #FFF">
    <td >
t
</td>
</tr>
</table>

<p style=" color:#FFF; font-size:12px; font:Arial, Helvetica, sans-serif" align="center">
Personal Training Five Dock | &copy; CompletePT 2009 | ALL RIGHTS RESERVED | Designed by <a href="mailto:[email protected]?subject=Enquiry from CompletePT"><font color="#FFFFFF"> David Mcintosh </font></a></p>
<p style="font-size:10px; font:Arial, Helvetica, sans-serif" align="center"><a href="https://www.enterprisesearch.com.au" target="_blank" title="Free Search Engine Traffic"><font color="#FFFFFF"> Enterprise Search - Advertise for free in our business directory and receive more search engine traffic.</font></a></p>
</div>
</body>
</html>

    I originally had the sidebar as a nested table to position it correctly, but when i cut the code up, i neglected to remove the 2nd table entry, soooo footer.php was being called inside the parent table inside sidebar.php.

    I had to either close the <table> or remove it. It’s now been removed, and the footer is working perfectly.

    Thank you ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘footer is not going to the bootom of screen’ is closed to new replies.