3 replies [Last post]
dzigner
Offline
Regular
Last seen: 8 years 16 weeks ago
Timezone: GMT-7
Joined: 2004-01-15
Posts: 17
Points: 4

Hello

I have the footer sticky code and the footer stays on the bottom of pages as required. My problem is that it lays outside of the page background, and covers up the bottom part of the container div, though not its contents.
If needed, I can upload and let you see the code in action.
Please help, thank you.

My CSS code:

/* if you remove this then the container disappears in IE */
* html #containerind {height: 100%; min-height:100%;} 
/* General */
* {margin:0;padding:0;} 
html, body {height:100%;}
html {background: -moz-radial-gradient(center, #3399ff, #fff) no-repeat #BBDDFF; background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 900, from(#3399ff), to(#fff)) no-repeat #BBDDFF; background:-o-radial-gradient(center, #3399ff, #fff);}
body {font: 1em Verdana, Arial, Helvetica, sans-serif; color: #000;}
#wrapper {min-height:100%;}
/* index */
#containerind {width:85%; margin-left:auto; margin-right:auto; margin-top:5px; background-color:#FFF;border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; position:relative; padding-bottom:30px;}
/* footer */
#bottom {width:90%; margin-left:auto; margin-right:auto; background:#E7E7F3 no-repeat; border: thin solid #3399ff; border-radius: 45px 10px 45px 10px; -moz-border-radius: 45px 10px 45px 10px; -webkit-border-radius: 45px 10px 45px 10px; font: .55em Verdana, Geneva, sans-serif; position:relative; margin-top:-30px; padding:30px; height:30px; clear:both;}
.copyrgt {float:left; width:50%;}
.bottommenu {float:right;}
.bottommenu li {display:inline; list-style-type:none; text-decoration:none; padding:0 5px; border-right: thin solid #666633; color:#666633;}
.bottommenu li a:hover {text-decoration:underline;}
.bottommenu li a:visited {text-decoration:none;}
.bottommenu li a:hover,.bottommenu li a:visited { color:#6363B0;}

HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>D.zigns SiteMap</title>
<!--[if !IE 7]>
	<style type="text/css">
		#wrapper {display:table;height:100%}
	</style>
<![endif]-->
<?php require_once('top.php'); ?>
</head>
<body>
<div id="wrapper">
<div id="container">
<?php require_once('topmenu.php'); ?>
<div id="leftcont">
This section will have the sitemap of the website.
<!-- end of #leftcont--></div>
<div id="sidemenu">
<?php require_once('right.php'); ?>
<!-- end of #sidemenu--></div>
<!-- end of #container--></div>
<!-- end #wrapper --></div>
<?php require_once('bottom.php'); ?>
</body>
</html>

dzigner
D.zigns

dzigner
Offline
Regular
Last seen: 8 years 16 weeks ago
Timezone: GMT-7
Joined: 2004-01-15
Posts: 17
Points: 4

urls

hi
you can check the above codes here:
http://erp.des-us.com/
http://erp.des-us.com/career.php and
http://erp.des-us.com/sitemap.php

You will notice that the gradient background (no image) ends somewhere between the footer div, but it should end after the footer div, meaning, it should encompass the whole browser window.
thanks

dzigner
D.zigns

eyoung100
eyoung100's picture
Offline
Regular
Texas, USA
Last seen: 8 years 16 weeks ago
Texas, USA
Timezone: GMT-5
Joined: 2012-04-05
Posts: 14
Points: 17

Re: Footer Issue

Try This:

<div id="pagewidth"> <!-- Sets width and height of Master Container, in your case containerind -->
<div id="header"></div>
<div id="wrapper"><!-- This Wraps the divs contained within it, preventing whitespace betwween the child divs --> 
<div id="menu">This Contains Your Navigation Menu, float:left will put it above the slideshow, float right will put it near where you have it now -->
<div id="twocolums"><!-- This Contains a left and a right column -->
     <div id="maincol"><!-- Your Page content goes in this column, floated right --></div>
     <div id="leftcol"><!-- Your Sidebar content goes in this column, floated left --></div>
     <div id="footer"><!-- This Goes here to stay in the wrapper div as maincol is your content area, make sure to clear:both -->
</div><!-- End Wrapper -->
</div><!-- End Page Width -->

Setting pagewith to a percentage determines a floating layout, setting it to a pixel value determines a fixed layout. The fact that footer is clearing both columns in twocolumns will move the blank space between your content and footer to the bottom, and footer is a row, so the column name of twocolums still does what it says. Setting height of page width to 100% will fill the area between header and footer by stretching twocolumns to fill in the space.

TIP: When first Creating a layout, use the following CSS:

#containername{
          border:1px solid <color>;
}

Be sure and use different colors for each #containername. When the containers are where you want them remove the border.

dzigner
Offline
Regular
Last seen: 8 years 16 weeks ago
Timezone: GMT-7
Joined: 2004-01-15
Posts: 17
Points: 4

try this

Hello
My containerind and container divs are below the header, and are not the main container. the main container is wrapper. But putting bottom div inside wrapper div in my code, brings the bottom div up to where the container div ends, meaning, bottom does not stay at the bottom. So, the way I have organised the html is this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>D.zigns SiteMap</title>
<!--[if !IE 7]>
	<style type="text/css">
		#wrapper {display:table;height:100%}
	</style>
<![endif]-->
<?php require_once('top.php'); ?>
</head>
<body>
<div id="wrapper">
<div id="container">
this has top menu items
<div id="leftcont">
This section will have the sitemap of the website. this is left bigger column.
<!-- end of #leftcont--></div>
<div id="sidemenu">
this is the right smaller column.
<!-- end of #sidemenu--></div>
<!-- end of #container--></div>
<!-- end #wrapper --></div>
<div id="bottom">
this is the bottom or footer div
<!-- end #bottom --></div>
</body>
</html>

this is the way, my css renders the file with footer at the bottom.
thanks

dzigner
D.zigns