...

View Full Version : HELP! Can't get content to stretch to bottom of page...



picazer720
08-11-2010, 04:23 AM
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:



/* ===== 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...

abduraooft
08-11-2010, 08:54 AM
We need to see your complete html as well. Or a link to your page would be much better.

iLochie
08-11-2010, 09:43 AM
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:



/* ===== 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!

picazer720
08-11-2010, 04:53 PM
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:



<?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

agxphoto
08-12-2010, 03:43 AM
Look over this article:
http://www.communitymx.com/content/article.cfm?page=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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum