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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HELP! Can't get content to stretch to bottom of page...

    So I'm building my first website and I can't seem to find a way to get pages where small amounts of content to stretch to the bottom of the page. I've been googling for HOURS and nothing is working!!

    I don't want to put a fixed height, because I don't want a ton of white space there if it doesn't need to be. Basically I want to have the footer at the bottom no matter what the resolution of the monitor.

    Here is my CSS:

    Code:
    /* ===== global styles ===== */
    
    body {
    	font-family: "Times New Roman", serif;
    	color: #253d8d;
    	background: #253d8d;
    	margin: 0px;
    	padding: 0px;
    }
    
    table {
    	margin: 10px;
    	padding: 0px;
    	border-collapse: collapse;
    	text-align: left;
    }
    
    tr, td {
    	margin: 0px;
    	padding: 0px;
    	vertical-align: top;
    }
    
    /* =====outer table ===== */
    
    #outerTable {
    	margin: auto;
    	width: 900px;
    	background: #ffffff url(../images/header.jpg) no-repeat;
    }
    
    
    /* ===== main menu ===== */
    
    td#linkMenu {
    	font-family: "Arial Rounded MT Bold", sans-serif;
    	color: #253d8d;
    	height: 200px;
    	vertical-align: bottom;
    }
    
    #linkMenu div {
    	height: 20px;
    	margin-left: none;
    	padding: none;
    }
    
    #linkMenu a {
    	color: #253d8d;
    	text-decoration: none;
    }
    
    #linkMenu a.nav:hover {
    	color: #009fc5;
    	text-decoration: none;
    }
    
    /* ===== main content ===== */
    
    td#contentLeft {
    	
    	width: 850px;
    
    }
    
    div#mainContent {
    	padding: 0px;
    	margin: 0px;
    	
    }
    
    
    .table_photo{ * 
    * *width:850px;
    * *background-color:#000000;
    * *text-align:center;
    * *overflow-x:scroll;
    * *overflow-y:scroll;
    * * }
    
    
    
    /* ===== footer ===== */
    
    p#footer {
    	font-family: "Times New Roman", serif;
    	font-size: .75em;
    	color: #253d8d;
    	text-align: center;
    	
    }
    Thanks for your help...

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    We need to see your complete html as well. Or a link to your page would be much better.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Jan 2010
    Posts
    101
    Thanks
    17
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by picazer720 View Post
    So I'm building my first website and I can't seem to find a way to get pages where small amounts of content to stretch to the bottom of the page. I've been googling for HOURS and nothing is working!!

    I don't want to put a fixed height, because I don't want a ton of white space there if it doesn't need to be. Basically I want to have the footer at the bottom no matter what the resolution of the monitor.

    Here is my CSS:

    Code:
    /* ===== global styles ===== */
    
    body {
    	font-family: "Times New Roman", serif;
    	color: #253d8d;
    	background: #253d8d;
    	margin: 0px;
    	padding: 0px;
    }
    
    table {
    	margin: 10px;
    	padding: 0px;
    	border-collapse: collapse;
    	text-align: left;
    }
    
    tr, td {
    	margin: 0px;
    	padding: 0px;
    	vertical-align: top;
    }
    
    /* =====outer table ===== */
    
    #outerTable {
    	margin: auto;
    	width: 900px;
    	background: #ffffff url(../images/header.jpg) no-repeat;
    }
    
    
    /* ===== main menu ===== */
    
    td#linkMenu {
    	font-family: "Arial Rounded MT Bold", sans-serif;
    	color: #253d8d;
    	height: 200px;
    	vertical-align: bottom;
    }
    
    #linkMenu div {
    	height: 20px;
    	margin-left: none;
    	padding: none;
    }
    
    #linkMenu a {
    	color: #253d8d;
    	text-decoration: none;
    }
    
    #linkMenu a.nav:hover {
    	color: #009fc5;
    	text-decoration: none;
    }
    
    /* ===== main content ===== */
    
    td#contentLeft {
    	
    	width: 850px;
    
    }
    
    div#mainContent {
    	padding: 0px;
    	margin: 0px;
    	
    }
    
    
    .table_photo{ * 
    * *width:850px;
    * *background-color:#000000;
    * *text-align:center;
    * *overflow-x:scroll;
    * *overflow-y:scroll;
    * * }
    
    
    
    /* ===== footer ===== */
    
    p#footer {
    	font-family: "Times New Roman", serif;
    	font-size: .75em;
    	color: #253d8d;
    	text-align: center;
    	
    }
    Thanks for your help...
    I'm sure there's better methods, but what I generally do is to use Javascript's window.innerHeight to determine the user's browser window height. Then you can do a little math and either make the page a static height, relative to their browser window, OR, position a footer at a fixed or absolute position. Come to think of it, this is probably the worst way of doing it. Hope there's better solutions!

  • #4
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    We need to see your complete html as well. Or a link to your page would be much better.
    i don't have the website up yet, but here is the code for the "links" page:

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    	"http://www.w3.org/TR/xhtml11/DTD/xhtml11-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>Lawrence Czech CPA, CTP - Accounting, Taxes, Consulting</title>
    	<link href="css/main.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <table id="outerTable">
    	<tr><td id="contactButton">
    		<div>
    			
    		</div>
    	</td></tr>
    	<tr><td id="linkMenu">
    		<div>
    			<center>
    			<a href="index1.html" class="nav">[HOME]</a> &nbsp;&nbsp;&nbsp;- &nbsp;&nbsp;&nbsp;
    			<a href="directions.html" class="nav">[DIRECTIONS]</a> &nbsp;&nbsp;&nbsp;- &nbsp;&nbsp;&nbsp;
    			<a href="newsletter.html" class="nav">[NEWSLETTER]</a>&nbsp;&nbsp;&nbsp; - &nbsp;&nbsp;&nbsp;
    			<a href="links.html"class="nav">[LINKS]</a>&nbsp;&nbsp;&nbsp; - &nbsp;&nbsp;&nbsp;
    			<a href="contact.html" class="nav">[CONTACT]</a>
    			</center>
    		</div>
    	</td></tr> <!-- mainMenu -->
    	<tr><td>
    		<table id="contentTable"><tr>
    			<td id="contentLeft">
    <div id="mainContent">
    		<ul id="maincontent">
    
    	<tr><td>		
    					<center>
    					<br/><br/>
    					<font size=6><b>Helpful Financial Links:</b></font><br/><br/>
    					<a href="http://www.nstp.org">National Society of Tax Professionals</a>
    					<br/><br/><a href="http://www.aicpa.org/Pages/Default.aspx">American Institute Certified Public Accountants</a>
    					<br/><br/><a href="http://www.mscpaonline.org/">Massachusetts Society of Certified Public Accountants</a>
    					<br/><br/><a href="http://www.irs.gov">Internal Revenue Service</a>
    					<br/><br/><a href="http://www.mass.gov/?pageID=dorhomepage&L=1&L0=Home&sid=Ador">Massachusetts Department of Revenue</a>
    					<br/><br/><a href="http://www.sec.state.ma.us/cor/">Massachusetts Secretary of State - Corporations Division</a>
    					
    					
    					
    					
    					
    					<p class="linkMenu">
    					</p>
    					</p>
    					
    				</div> <!-- mainContent -->
    			</td> <!-- contentLeft -->
    </table>
    
    <p id="footer">
    Copyright © 2007-2010. Lawrence Czech CPA, Inc. All rights reserved.
    			
    
    </body>
    </html>
    and this is what it looks like:
    http://i37.tinypic.com/28cplbd.png

  • #5
    New Coder
    Join Date
    Jul 2010
    Posts
    24
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Look over this article:
    http://www.communitymx.com/content/a...ge=2&cid=BAD95

    Main idea described is to set body at 100% height and then container also to 100%. From there, maybe style out the footer so that it rides with the bottom property.

    http://www.w3schools.com/css/css_positioning.asp
    http://www.w3schools.com/css/pr_pos_bottom.asp

    Maybe that will get you closer.
    You are familiar with computers, right?


  •  

    Posting Permissions

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