I have been trying to get the footer to stay at the bottom with no luck. I am trying to get this to work in IE 7 and above for now testing with IE8 and Firefox. It seems straight forward that I should be able to put html, body, form all to height 100% then set the wrap div to min-height 100% however it never expands to catch everything. PLEASE HELP!!!!! Here is my HTML code for the main master page: <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!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 runat="server"> <title>Leipsic Church of the Nazarene</title> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> <link href="Style%20Sheets/MasterPage.css" rel="stylesheet" type="text/css" /> <style type="text/css"> </style> </head> <body> <form id="MasterForm" runat="server"> <div id="wrap"> <div id = "banner"> <img id="bnrHeader" src="Images/ChurchBanner.jpg" /> </div> <div id = "Menu"> <div id = "subMenu"> <ul> <li id="lihome"><h4><a title="Home" href="Home.aspx">Home</a></h4></li> </ul> <ul> <li id="liAboutUs"><h4><a title="AboutUs" href="AboutUs.aspx">About Us</a></h4> <ul id ="subAboutUs"> <li id="liAUMissionStatement"><a title="AboutUs > MissionStatement" href="MissionStatement.aspx">Mission Statement</a></li> <li id="liAUWhatweBelieve"><a title="AboutUs > WhatweBelieve" href="WhatWeBelieve.aspx">What we Believe</a></li> <li id="liAUPastorInformation"><a title="AboutUs > PastorInformation" href="#">Pastor Information</a></li> <li id="liAUChurcOfficers"><a title="AboutUs > Church Officers" href="#">Church Officers</a></li> <li id="liAUChurchDirectory"><a title="AboutUs > Church Directory" href="#">Church Directory</a></li> </ul> </li> </ul> <ul> <li id="liSpirituallySeeking"><h4><a title="SpirituallySeeking" href="SpirituallySeeking.aspx">Spiritually Seeking</a></h4> <ul id="subSpirituallySeeking"> <li><a title="SpirituallySeeking > HowtobecomeaChristian" href="#">How to become a Christian</a></li> <li><a title="SpirituallySeeking > NextSteps" href="#">NextSteps</a></li> <li><a title="SpirituallySeeking > HowtoUnderstandtheBible" href="#">How to Understand the Bible</a></li> <li><a title="SpirituallySeeking > HowtoPray" href="#">How to Pray</a></li> <li><a title="SpirituallySeeking > FindingMyPlaceofService" href="#">Finding My Place of Service</a></li> <li><a title="SpirituallySeeking > OtherHelpfulLinks" href="#">Other Helpful Links</a></li> </ul> </li> </ul> <ul> <li id="liEvents"><h4><a title="Events" href="Events.aspx">Events</a></h4> <ul id="subEvents"> <li><a title="Events > Concerts" href="#">Concerts</a></li> <li><a title="Events > Easter" href="#">Easter</a></li> </ul> </li> </ul> <ul> <li id="liMedia"><h4><a title="Media" href="Media.aspx">Media</a></h4> <ul id ="subMedia"> <li><a title="Media > Photos" href="#">Photos</a></li> <li><a title="Media > Music" href="#">Music</a></li> <li><a title="Media > WeeklyBulletin" href="#">Weekly Bulletin</a></li> <li><a title="Media > Sermons" href="#">Sermons</a></li> <li><a title="Media > LiveStream" href="#">Live Stream</a></li> <li><a title="Media > Announcements" href="#">Announcements</a></li> </ul> </li> </ul> <ul> <li id="liMinistry"><h4><a title="Ministry" href="Ministry.aspx">Ministry</a></h4> <ul id="subMinistry"> <li><a title="Ministry > SundaySchool" href="#">Sunday School</a></li> <li><a title="Ministry > NazareneYouth" href="#">Nazarene Youth</a></li> <li><a title="Ministry > NazareneMissions" href="#">Nazarene Missions</a></li> <li><a title="Ministry > DiaperBank" href="#">DiaperBank</a></li> <li><a title="Ministry > MensHelpClub" href="#">Men's Help Club</a></li> <li><a title="Ministry > AngelFood" href="#">Angel Food</a></li> <ul> <li><a title="Ministry > AngelFood > BrowseCatalog" href="#">Browse Catalog</a></li> <li><a title="Ministry > AngelFood > PlaceOrder" href="#">Place Order</a></li> <li><a title="Ministry > AngelFood > CheckOrder" href="#">Check Order</a></li> </ul> </ul> </li> </ul> <ul> <li id="liRequests"><h4><a title="Requests" href="Requests.aspx">Requests</a></h4> <ul id="subRequests"> <li><a title="Requests > Prayer" href="#">Prayer</a></li> <li><a title="Requests > Wedding" href="#">Wedding</a></li> <li><a title="Requests > Baptism" href="#">Baptism</a></li> <li><a title="Requests > Membership" href="#">Membership</a></li> </ul> </li> </ul> <ul> <li id="liTithesandOfferings"><h4><a title="TithesandOfferings" href="TithesandOfferings.aspx">Tithes and Offerings</a></h4> <ul id="subTithesandOfferings"> <li><a title="TithesandOfferings > DiaperBag" href="#">Diaper Bag</a> <!--<img id = "leftarrow1" src="Images/RightArrow.jpg" /> --> <ul> <li><a title="TithesandOfferings > DiaperBag > Application" href="#">Application</a></li> <li><a title="TithesandOfferings > DiaperBag > Donate" href="#">Donate</a></li> <li><a title="TithesandOfferings > DiaperBag > Volunteer" href="#">Volunteer</a></li> </ul> </li> <li><a title="TithesandOfferings > Church" href="#">Church</a> </li> <li><a title="TithesandOfferings > BuildingFunds" href="#">Building Funds</a> </li> <li><a title="TithesandOfferings > Missions" href="#">Missions</a> </li> </ul> </li> </ul> </div> </div> <div id = "ChurchServiceTimes"> <img id = "ChurchPic" src="Images/LeipsicChurch.jpg" /> <table id = "ServiceTimes"> <tr> <td> <ul id = "invitational"> <li>We invite you to be our guest at the Leipsic Church of the Nazarene. Come just as you are. Our people are warm and friendly, and we have great services in which God moves and ministers. There is a place for you and your family. </li> </ul> </td> </tr> <tr> <td> <ul> <li id = "ServiceTimesMain"><a>Sunday Acitivities</a></li> <ul> <li><a>Sunday School 10:00 am</a></li> <li><a>Worship Service 10:50 am</a></li> <li><a>Care Groups 6:00 pm</a></li> </ul> </ul> </td> </tr> <tr> <td> <ul> <li id = "ServiceTimesMain">Wednesday Activities</li> <ul> <li>Bible Study 7:00 pm</li> <li>Kids Club 7:00 pm</li> <li>Teens 7:00 pm</li> </ul> </ul> </td> </tr> </table> </div> <div id = "ContentPlaceHolder"> <asp:ContentPlaceHolder id="MasterPageContentHolder" runat="server"> </asp:ContentPlaceHolder> </div> </div> </form> <div id="footer"> <table id = "tblFooter"> <tr> <td id = "tblFooterCellOuter"> 318 East Sugar Street</td> <td id = "tblFooterCellInner"> <li><a title="ContactLink" href="ContactUs.aspx">Contact Us</a></li> </td> <td id = "tblFooterCellOuter"> (419)943-2543 </td> </tr> </table> </div> </body> </html> HTML: and here is my css for the master page: /* NOTES FOR PROGRAMMING IN HTML AND CSS TO REMEMBER When adding attributes to tags realize that the top most tags attributes get inhereted to all the tags underneath for example changing the html or body tag will effect everything on the page changing the ul tag will effect all li's only declare generic attributes to top tags then get more detailed to individual tags by id when using relative location it will be based off the tag just above it absolute position will just that and won't account for the previous tags position. */ html { height: 100%; width: 100%; } body { border: medium solid #FF0000; height: 100%; width: 100%; } form { height:100%; border: medium solid #00FF00; } #wrap { border: medium solid #0000FF; min-height: 100%; width: 100%; } #banner { position: absolute; width: 95%; height: 200px; background-color: #FFFFFF; top: 0px; left: 2.5%; z-index: 0; } #bnrHeader { position: absolute; width: 100%; height: 100%; } #Menu { padding: 0px; border-style: solid; border-width: thin; z-index: 2; width: 95%; position: absolute; top: 205px; height: 30px; background-color: #153750; left: 2.5%; } #subMenu { position: relative; left: 10%; } #Menu ul { list-style-type: none; padding: 0; margin: 0 2% 0 2%; float: left; display: inline-block; } #Menu a, #Menu h4 { font: bold small/16px Arial; display: block; margin: 0; padding: 0px; } #Menu ul a:link { color: #FFFFFF; font-weight: bold; } #Menu ul a:visited { font-weight: bold; color: #FFFFFF; } #Menu ul a:hover { color: #C3835F; font-weight: bold; } #Menu li { position: relative; text-align: left; } #lihome { position: relative; width: 39px; } #liAboutUs { position: relative; width: 58.5px; } #liSpirituallySeeking { position: relative; width: 130px; } #liEvents { position: relative; width: 45.5px; } #liMedia { position: relative; width: 45.5px; } #liMinistry { position: relative; width: 52px; } #liRequests { position: relative; width: 58.5px; } #liTithesandOfferings { position: relative; width: 130px; } #liAngelFoodOrders { position: relative; width: 78px; } #subAboutUs { width: 130px; } #subSpirituallySeeking { width: 200px; } #subEvents { width: 80px; } #subMedia { width: 110px; } #subMinistry { width: 110px; } #subRequests { width: 85px; } #subTithesandOfferings { width: 100px; } #Menu ul ul ul { position: absolute; top: 0; left: 100%; width: 100%; } div#Menu ul ul ul, div#Menu ul ul li:hover ul ul { display: none; } div#Menu ul ul li: hover ul, div#Menu ul ul ul li:hover ul { display: inline; } #Menu ul ul { position: absolute; z-index: 500; } #Menu ul li ul { border-style: solid; border-width: 1px 2px 1px 2px; border-color: #000000; background-color: #153750; position: absolute; z-index: 4; } #Menu ul li ul li ul { position: absolute; left: 105px; } #Menu ul ul ul { top: 0; left: 100%; } div#Menu ul ul, div#Menu ul li:hover ul ul, div#menu ul ul li:hover ul ul { display: none; } div#Menu ul li:hover ul, div#Menu ul ul li:hover ul, div#Menu ul ul ul li:hover ul { display: inline; } #ChurchServiceTimes { border: medium solid #000000; background-color: #153750; position: absolute; top: 250px; left: 2.5%; width: 275px; height: auto; list-style-type: none; z-index: 1; clear:both; } #ChurchPic { position: relative; top: 10px; left: 15px; width: 250px; height: auto; z-index: 2; } #ServiceTimes ul { list-style-type: none; left: -10px; position: relative; color: #FFFFFF; } #ServiceTimes ul li { left: 5; position: relative; top: 5px; } #ServiceTimesMain { text-decoration: underline; } #invitational { list-style-type: none; font-weight: bold; color: #FFFFFF; z-index: 3; } #ContentPlaceHolder { position: relative; width: 100%; top: 250px; left: 310px; z-index: 1; } #footer { clear: both; border-style: solid; border-width: medium; position: relative; height: 25px; background-color: #153750; width: 95%; left: 2.5%; } #tblFooter { font-family: 'monotype Corsiva'; font-size: medium; font-weight: bold; text-align: center; z-index: 2; width: 100%; position: relative; } #tblFooterCellOuter { width: 200px; height: 25px; z-index: 5; color: #FFFFFF; } #tblFooterCellInner { width: 100px; height: 25px; z-index: 4; color: #FFFFFF; list-style-type: none; } #tblFooterCellInner a:link { color: #FFFFFF; } #tblFooterCellInner a:visited {color: #FFFFFF; } #tblFooterCellInner a:hover { color: #C3835F; }
I'm not 100% sure what you are trying to do. But if you are trying to get a 100% height div, then have a look at faux columns. That should set you in the right direction.
1) it might help to use a VALID HTML declaration. 2) there is no such attribute as runat. (or is that some sort of ASP hook removed when the page is served - christ I hate ASP) 3) Got enough DIV wrapping your menus? I very much doubt you need TWO, hell, one is probably more than is needed. 4) H4's with no higher ordered headings before them INSIDE a linked list? So we can assume invalid heading orders across the entire page? 5) if you need title attributes on your anchors that have text inside them, you probably have the wrong text inside your anchors. 6) Table for layout... with only ONE TD per TR? Why bother using a table at that point? As to what you are asking for, I believe what you are looking for is called a 100% min-height layout. html, body { position:relative; /* fix Opera bug */ height:100%; } #pageWrapper { overflow:hidden; /* wrap floats */ min-height:100%; } * html #pageWrapper { /* IE6/earlier has no min-height, but will incorrectly treat height as such when overflow is visible - thankfully the height trips haslayout, so floats will still be wrapped */ overflow:visible; height:100%; } #content { padding-bottom:40px; /* equal to footer height */ } #footer { position:relative; margin-top:-40px; height:40px; } Code (markup): With markup something like this: </head><body> <div id="pageWrapper"> <div id="content"> Page Content here <!-- #content --></div> <!--#pageWrapper --></div> <div id="footer"> Footer Content Here <!-- #footer --></div> </body></html> Code (markup): The HTML/BODY declaration sets a height so min-height will actually work, and a minor fix for opera in relation to reporting height on body to it's children. #pageWrapper sets that div to always grow to at least the height of the browser window, while still expanding larger if the content is taller than the browser window. From there we just pad the bottom of our content area the same as the height of our footer, then put the footer AFTER our pagewrapper and use a negative margin to ride it up over our footer. The only drawback to this approach is that your footer MUST be a fixed height, and thanks to FF rounding things off like a sweetly retarded crack addict you cannot use %/EM for the height of the footer, you MUST use PX otherwise you'll get a scrollbar that appears/disappears willy-nilly. Demo of that in action here: http://battletech.hopto.org/html_tutorials/minHeight/template.html Footer is fixed at the bottom if the window is taller than the page, but will not collapse over the content if the windows is shorter than the page which is what I assume you are asking for.