...

View Full Version : My footer won't stay always at the bottom of the page



HouseMD
01-02-2013, 07:36 PM
Hey Guys! So, I've been making this website lately that I arranged everything perfectly excpet for the footer. When I have a little longer text and when I scroll down the footer just doesn't go down with the scrolling. It stays on the halfway. I've tried some things from the net, none of which solved my issue.

Here is my CSS Code:


html, body {
height:100%;
margin:0;
}


/* CONTAINER */

#container
{
margin: 0 auto;
width: 100%;
background: #fff;
min-height:100%;
position:relative;

}


/* HEADER */

#header {
border:none;
position: absolute;
left: 135px;
top:20px;
}



/* MENU */

#saturday {
position:absolute;
left:140px;
top:160px;
width:1050px;
z-index:1;
}

ul#saturday{margin:0;padding:0;list-style-type:none;width:1050px;
position:relative;display:block;height:36px;text-transform:uppercase;
font-size:12px;font-weight:bold;
background:transparent url("images/bgOFF.gif") repeat-x top left;
font-family:Helvetica,Arial,Verdana,sans-serif;
border-bottom:3px solid #336666;border-top:1px solid #C0E2D4; border-left:1px solid #91B0A3; border-right: 1px solid #91B0A3;}

ul#saturday li{display:block;float:left;margin:0;pading:0;}

ul#saturday li a{display:block;float:left;color:#336666; /* #874B46 */
text-decoration:none;padding:12px 20px 0 20px;height:24px;
background:transparent url("images/bgDIVIDER.gif") no-repeat top right;}

ul#saturday li a:hover{
background:transparent url("images/bgHOVER.gif") no-repeat top right;}

ul#saturday li a.current,ul#saturday li a.current:hover{color:#fff;
background:transparent url("images/bgON.gif") no-repeat top right;}


/* LEFT MENU */

#content-container
{
float: left;
width: 100%;
background: #FFF;
overflow:auto;
clear:both;
height:100%;
}

#content
{
clear: left;
float: left;
width: 55%;
padding: 20px 0;
margin: 0 0 0 4%;
display: inline;
position: absolute;
left:80px;
top:200px;
z-index:0;
}

#content h2 { margin: 0; }

/* RIGHT MENU */

#aside
{
float: right;
width: 20%;
padding: 20px 0;
margin: 0 3% 0 0;
display: inline;
position: absolute;
right: 60px;
top:200px;
}

#aside h3 { margin: 0; }

/* FOOTER */

#footer
{ position:absolute;
background-color:#FF6633; /* For demonstration purposes */
bottom:0;
width:100%;
clear:both;
}


And this is my HTML Code: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pipsopedia - Your forex teacher</title>
</head>
<body>

<link rel=stylesheet HREF="style.css" type="text/css" />
<div id="container">



<div id='header'>
<a href="index.html"><img src="images/new_logo.png"></a>
</div>




<ul id="saturday">
<li><a href="" title="" class="current">Home</a></li>
<li><a href="" title="">Lessons</a></li>
<li><a href="" title="" >Blog</a></li>
<li><a href="" title="">Forum</a></li>
<li><a href="" title="">Contact Us</a></li>
</ul>
<div id="content-container">
<style type="text/css">
#content {
border-right: 1px solid #E8E8E8;
padding: 15px;
}
</style>
<div id="content">
<p><font face="Arial" size="2">What is FOREX?</font></p>
<p><font face="Arial" size="2">The foreign exchange market, known as FOREX or FX, is the largest and fastest growing market in the world. Daily trade volume is over <b>$5 TRILLION</b> . The largest stock market in the world, the New York Stock Exchange, has a daily trade volume of $22 billion. Compared to NYSE, the foreign exchange market looks SUPER ENORMOUS.</font></p><br />
<img src="FX_vs_NYSE.png">
<font face="Arial" size="2"><p>Basically, the foreign exchange market is where governments, banks, investors, businesses and speculators come to exchange money. It is an over-the-counter (OTC) market, which means there is no central exchange and the contracts are not standardized. Forex trading is buying of one currency and selling another. That means they are traded in pairs. For example EUR/USD or USD/JPY. How to understand the price of each currency? You’ve probably seen the quote EUR/USD 1.3086.</font></p>
<img src="content/Base_quote.png">
<font face="Arial" size="2"><p>The first currency (left of the slash) is called base currency. And the second one (right of the slash) is called quote currency. In our example the base currency is the euro and the quote currency is the US dollar. The quote shows you how much you need to pay in units of the quote currency in order to buy 1 unit of the base currency. In our example you need to pay 1.3086 US dollars to buy 1 euro. In other words 1 euro is 1.3086 US dollars. Remember that the base currency is the basis of buying and selling.</font> </p>
</div>
<div id="aside">
<h3>
Aside heading
</h3>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
</p>
</div>
<div id="footer">
Copyright &copy; Pipsopedia 2012.
</div>
</div>
</div>

</body>
</html>


I would be very thankful if any of you guys help me with this.

Matt Boldt
01-03-2013, 04:56 AM
Have you given this a try?
http://www.cssstickyfooter.com/

Excavator
01-03-2013, 08:36 AM
Hello HouseMD,
The first problem I see is you absolute position everything. Nothing wrong with ap when it's needed but it's not needed in your layout.

Another problem I see right off is your footer is enclosed in your <aside>

You also have some CSS in the body of your document. CSS belongs in the head of the document when it's linked or attached, only inline CSS goes in the body.

Look at it like this once -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pipsopedia - Your forex teacher</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
/* CONTAINER */

#container {
margin: 0 auto;
width: 100%;
background: #fff;
min-height: 100%;
position: relative;
}
/* HEADER */

#header {
height: 36px;
width: 1050px;
margin: 0 auto;
background: #fc6;
/*position: absolute;
left: 135px;
top: 20px;*/
}
/* MENU */

/*#saturday {
position: absolute;
left: 140px;
top: 160px;
width: 1050px;
z-index: 1;
}*/
ul#saturday {
margin: 0;
padding: 0;
list-style-type: none;
width: 1050px;
position: relative;
display: block;
height: 36px;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
background: transparent url("images/bgOFF.gif") repeat-x top left;
font-family: Helvetica, Arial, Verdana, sans-serif;
border-bottom: 3px solid #336666;
border-top: 1px solid #C0E2D4;
border-left: 1px solid #91B0A3;
border-right: 1px solid #91B0A3;
}
ul#saturday li {
display: block;
float: left;
margin: 0;
pading: 0;
}
ul#saturday li a {
display: block;
float: left;
color: #336666; /* #874B46 */
text-decoration: none;
padding: 12px 20px 0 20px;
height: 24px;
background: transparent url("images/bgDIVIDER.gif") no-repeat top right;
}
ul#saturday li a:hover { background: transparent url("images/bgHOVER.gif") no-repeat top right; }
ul#saturday li a.current, ul#saturday li a.current:hover {
color: #fff;
background: transparent url("images/bgON.gif") no-repeat top right;
}
/* LEFT MENU */

#content-container {
/*float: left;
height: 100%;*/
width: 100%;
background: #FFF;
overflow: auto;
clear: both;
}
#content {
clear: left;
float: left;
width: 55%;
padding: 20px 0;
margin: 0 0 0 4%;
display: inline;
/*position: absolute;
left: 80px;
top: 200px;
z-index: 0;*/
}
#content h2 { margin: 0; }
/* RIGHT MENU */

#aside {
float: right;
width: 20%;
padding: 20px 0;
margin: 0 3% 0 0;
display: inline;
/*position: absolute;
right: 60px;
top: 200px;*/
}
#aside h3 { margin: 0; }
/* FOOTER */

#footer {
/*position: absolute;
bottom: 0;*/
width: 100%;
clear: both;
background-color: #FF6633; /* For demonstration purposes */
}
#content {
border-right: 1px solid #E8E8E8;
padding: 15px;
}
</style>
</head>
<body>
<div id="container">
<div id='header'> <a href="index.html"><img src="images/new_logo.png"></a> </div>
<ul id="saturday">
<li><a href="" title="" class="current">Home</a></li>
<li><a href="" title="">Lessons</a></li>
<li><a href="" title="" >Blog</a></li>
<li><a href="" title="">Forum</a></li>
<li><a href="" title="">Contact Us</a></li>
</ul>
<div id="content-container">
<div id="content">
<p>What is FOREX?</p>
<p>
The foreign exchange market, known as FOREX or FX, is the largest and fastest
growing market in the world. Daily trade volume is over <b>$5 TRILLION</b> .
The largest stock market in the world, the New York Stock Exchange, has a daily
trade volume of $22 billion. Compared to NYSE, the foreign exchange market looks
SUPER ENORMOUS.
</p>
<img src="FX_vs_NYSE.png">
<p>
Basically, the foreign exchange market is where governments, banks, investors,
businesses and speculators come to exchange money. It is an over-the-counter
(OTC) market, which means there is no central exchange and the contracts are
not standardized. Forex trading is buying of one currency and selling another.
That means they are traded in pairs. For example EUR/USD or USD/JPY. How to
understand the price of each currency? You’ve probably seen the quote EUR/USD
1.3086.
</p>
<img src="content/Base_quote.png">
<p>
The first currency (left of the slash) is called base currency. And the second
one (right of the slash) is called quote currency. In our example the base
currency is the euro and the quote currency is the US dollar. The quote shows
you how much you need to pay in units of the quote currency in order to buy 1
unit of the base currency. In our example you need to pay 1.3086 US dollars to
buy 1 euro. In other words 1 euro is 1.3086 US dollars. Remember that the base
currency is the basis of buying and selling.
</p>
<!--end content--></div>
<div id="aside">
<h3> Aside heading </h3>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
</p>
<!--end aside--></div>
<!--end content-container--></div>
<div id="footer"> Copyright &copy; Pipsopedia 2012. </div>
<!--end container--></div>
</body>
</html>

minkoko
01-03-2013, 11:44 AM
Hello HouseMD,
The first problem I see is you absolute position everything. Nothing wrong with ap when it's needed but it's not needed in your layout.

Another problem I see right off is your footer is enclosed in your <aside>

You also have some CSS in the body of your document. CSS belongs in the head of the document when it's linked or attached, only inline CSS goes in the body.

Look at it like this once -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pipsopedia - Your forex teacher</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
/* CONTAINER */

#container {
margin: 0 auto;
width: 100%;
background: #fff;
min-height: 100%;
position: relative;
}
/* HEADER */

#header {
height: 36px;
width: 1050px;
margin: 0 auto;
background: #fc6;
/*position: absolute;
left: 135px;
top: 20px;*/
}
/* MENU */

/*#saturday {
position: absolute;
left: 140px;
top: 160px;
width: 1050px;
z-index: 1;
}*/
ul#saturday {
margin: 0;
padding: 0;
list-style-type: none;
width: 1050px;
position: relative;
display: block;
height: 36px;
text-transform: uppercase;
font-size: 12px;
font-weight: bold;
background: transparent url("images/bgOFF.gif") repeat-x top left;
font-family: Helvetica, Arial, Verdana, sans-serif;
border-bottom: 3px solid #336666;
border-top: 1px solid #C0E2D4;
border-left: 1px solid #91B0A3;
border-right: 1px solid #91B0A3;
}
ul#saturday li {
display: block;
float: left;
margin: 0;
pading: 0;
}
ul#saturday li a {
display: block;
float: left;
color: #336666; /* #874B46 */
text-decoration: none;
padding: 12px 20px 0 20px;
height: 24px;
background: transparent url("images/bgDIVIDER.gif") no-repeat top right;
}
ul#saturday li a:hover { background: transparent url("images/bgHOVER.gif") no-repeat top right; }
ul#saturday li a.current, ul#saturday li a.current:hover {
color: #fff;
background: transparent url("images/bgON.gif") no-repeat top right;
}
/* LEFT MENU */

#content-container {
/*float: left;
height: 100%;*/
width: 100%;
background: #FFF;
overflow: auto;
clear: both;
}
#content {
clear: left;
float: left;
width: 55%;
padding: 20px 0;
margin: 0 0 0 4%;
display: inline;
/*position: absolute;
left: 80px;
top: 200px;
z-index: 0;*/
}
#content h2 { margin: 0; }
/* RIGHT MENU */

#aside {
float: right;
width: 20%;
padding: 20px 0;
margin: 0 3% 0 0;
display: inline;
/*position: absolute;
right: 60px;
top: 200px;*/
}
#aside h3 { margin: 0; }
/* FOOTER */

#footer {
/*position: absolute;
bottom: 0;*/
width: 100%;
clear: both;
background-color: #FF6633; /* For demonstration purposes */
}
#content {
border-right: 1px solid #E8E8E8;
padding: 15px;
}
</style>
</head>
<body>
<div id="container">
<div id='header'> <a href="index.html"><img src="images/new_logo.png"></a> </div>
<ul id="saturday">
<li><a href="" title="" class="current">Home</a></li>
<li><a href="" title="">Lessons</a></li>
<li><a href="" title="" >Blog</a></li>
<li><a href="" title="">Forum</a></li>
<li><a href="" title="">Contact Us</a></li>
</ul>
<div id="content-container">
<div id="content">
<p>What is FOREX?</p>
<p>
The foreign exchange market, known as FOREX or FX, is the largest and fastest
growing market in the world. Daily trade volume is over <b>$5 TRILLION</b> .
The largest stock market in the world, the New York Stock Exchange, has a daily
trade volume of $22 billion. Compared to NYSE, the foreign exchange market looks
SUPER ENORMOUS.
</p>
<img src="FX_vs_NYSE.png">
<p>
Basically, the foreign exchange market is where governments, banks, investors,
businesses and speculators come to exchange money. It is an over-the-counter
(OTC) market, which means there is no central exchange and the contracts are
not standardized. Forex trading is buying of one currency and selling another.
That means they are traded in pairs. For example EUR/USD or USD/JPY. How to
understand the price of each currency? You’ve probably seen the quote EUR/USD
1.3086.
</p>
<img src="content/Base_quote.png">
<p>
The first currency (left of the slash) is called base currency. And the second
one (right of the slash) is called quote currency. In our example the base
currency is the euro and the quote currency is the US dollar. The quote shows
you how much you need to pay in units of the quote currency in order to buy 1
unit of the base currency. In our example you need to pay 1.3086 US dollars to
buy 1 euro. In other words 1 euro is 1.3086 US dollars. Remember that the base
currency is the basis of buying and selling.
</p>
<!--end content--></div>
<div id="aside">
<h3> Aside heading </h3>
<p>
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan.
</p>
<!--end aside--></div>
<!--end content-container--></div>
<div id="footer"> Copyright &copy; Pipsopedia 2012. </div>
<!--end container--></div>
</body>
</html>
Yes ,Now Good looking the web ,
Can you explain absolute and position relative of css ?
why choose absolute ? and why choose relative ?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum