Enjoy an ad free experience by logging in. Not a member yet?
Register .
PM User | 1
New to the CF scene
Join Date: Jan 2013
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
My footer won't stay always at the bottom of the page
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:
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;
}
Code:
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 © Pipsopedia 2012.
</div>
</div>
</div>
</body>
</html>
I would be very thankful if any of you guys help me with this.
PM User | 2
New Coder
Join Date: Jul 2009
Posts: 28
Thanks: 2
Thanked 3 Times in 3 Posts
PM User | 3
Master Coder
Join Date: Dec 2006
Location: Alaska
Posts: 9,410
Thanks: 22
Thanked 1,765 Times in 1,749 Posts
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 -
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>
<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 © Pipsopedia 2012. </div>
<!--end container--></div>
</body>
</html>
PM User | 4
New Coder
Join Date: Aug 2010
Location: myeik
Posts: 72
Thanks: 4
Thanked 5 Times in 5 Posts
Quote:
Originally Posted by
Excavator
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 -
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>
<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 © 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 ?
Jump To Top of Thread
Thread Tools
Rate This Thread
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
All times are GMT +1. The time now is 04:49 PM .
Advertisement
Log in to turn off these ads.
Before you post, read our: 
