Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #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 &copy; Pipsopedia 2012.
    		</div>
    	</div>
    	</div>
    	
    </body>
    </html>

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

  • #2
    New Coder
    Join Date
    Jul 2009
    Posts
    28
    Thanks
    2
    Thanked 3 Times in 3 Posts
    Have you given this a try?
    http://www.cssstickyfooter.com/

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,695
    Thanks
    22
    Thanked 1,832 Times in 1,816 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 &copy; Pipsopedia 2012. </div>
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Aug 2010
    Location
    myeik
    Posts
    81
    Thanks
    6
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Excavator View Post
    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 &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 ?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •