Hello, having problem with my footer. At the moment I'd like it stuck to the bottom of the browser window, and whilst it will do that with the below code in the browser am using it breaks the middle part of the website page. I've applied it to this page: www.jonpaulwild.co.uk/contact/error (an error mailing page) I've not changed the xhtml for the rest of the site as it's something I've just noticed I need to do with small content.
Code:@charset "utf-8"; /* Start Misc*/ * { margin: 0; padding: 0; } html, body {font-family: Arial, Helvetica, sans-serif; font-size: 13px; background-color: #252525; height: 100%} p, h1, h2 {line-height: 18px;} img {border: 0;} p {margin-top: 10px; padding-bottom: 20px; text-align:left; font-size: 13px; font-weight: normal; color: #666666;} h1 {margin-left: 40px; width: 200px; margin-top:0; padding-top: 55px; color: white; font-size:17px; font-family:Arial, Helvetica, sans-serif; text-align:center;} h2 {font-size:16px; font-family: Arial, Helvetica, sans-serif; text-align:left; font-weight: bold; color:#006600; padding-bottom: 30px;} h3 {color:#CC0066; font-size: 14px; font-family:Arial, Helvetica, sans-serif; padding-bottom: 10px;} .clear {clear:both} /* End Misc- */ #container{ position:relative; height: auto; height: 100%; min-height: 100%;} /* Begin Header-- */ #headerwrapper {width: 100%; height: 100px; background-color: #FFFFFF; width: 100%;} #header {width: 800px; height: 100px; margin: 0 auto} #headerleft {margin-top: 10px; width:400px; height: 82px; float:left; background-color: transparent;} #headerright {margin-top: 20px; margin-left: 160px; width:191px; height: 53px; float:right; background-color:transparent} /* End Header-*/ /*Start Main navigation-*/ #navwrapper {width: 100%; clear:both; background-color:#006633; background-image:url(../images/prinavbg.jpg); background-repeat:repeat-x; height: 42px} #prinav {background: url(../images/buttons.jpg);height: 42px; width: 483px; margin: 0px auto; position: relative} #prinav li {list-style-type: none; float: left} #prinav a {height: 42px; display: block} #home { width: 121px} #about { width: 120px} #services { width: 120px} #contact { width: 122px} #home a:hover {background: url(../images/buttons.jpg) 0px -42px no-repeat;} #about a:hover {background: url(../images/buttons.jpg) -121px -42px no-repeat;} #services a:hover {background: url(../images/buttons.jpg) -241px -42px no-repeat;} #contact a:hover {background: url(../images/buttons.jpg) -361px -42px no-repeat;} .home #prinav li#home a {background: url(../images/buttons.jpg) 0px -84px no-repeat;} .about #prinav li#about a {background: url(../images/buttons.jpg) -121px -84px no-repeat;} .services #prinav li#services a {background: url(../images/buttons.jpg) -241px -84px no-repeat;} .contact #prinav li#contact a {background: url(../images/buttons.jpg) -361px -84px no-repeat} /* End Main Navigation*/ /* Begin Secondary Navigation */ #secnav {width: 100%; background-image:url(../images/secnavbg.jpg); background-repeat:repeat-x; background-color: #FFCC00; height: 24px;} #secnav ul {margin: 0 auto; width: 700px; text-align: center; height: 20px; background-color: transparent; padding-top: 4px;} #secnav li {display:inline; padding-left: 30px; padding-right: 30px; font-size:12px; font-family:Arial, Helvetica, sans-serif; font-weight: normal;} #secnav li a {text-decoration: none; color: #3f3f3f} #secnav li a:visited {color: yellow;} #secnav li a:hover {color: yellow; text-decoration:underline;} #secnav li a:active {color: yellow;} #secnav li a.selected {color: purple;} /* End SecondaryNavigation- */ /* Begin Content - Global- */ #content_wrapper{width: 100%; margin: 0 auto; height: auto; background-image:url(../images/contentbg.jpg); background-repeat:repeat-x; background-position:top; background-color: #ececec; padding-bottom: 100px;} #content_wrapper_header {width: 741px; margin: 0 auto; height: 105px; background-image:url(../images/contenttop.jpg); background-repeat:no-repeat;;} #content_wrapper_page{height: auto; margin: 0 auto; width: 741px; background-image: url(../images/contenttop.jpg); background-position: 0px -105px; background-repeat:no-repeat; padding-bottom: 40px;} /* End Content - Global-- */ /*Begin About - Company-- */ #companycontent {float: left; height: auto; padding-left: 35px; padding-right: 30px; padding-top: 30px; margin-top: 0px;} #companycontent img {float:right; width: 240px; height: 143; border-width: 1px; border-style:solid; border-color: #CCCCCC; margin-bottom: 10px; margin-left: 10px;} .companyfact{padding-top: 25px; padding-bottom: 25px;} .companyfact li {color: green; font-weight: bold; background-image:url(../images/tick.jpg); background-repeat:no-repeat; background-position: left center; list-style-type: none; list-style-image: none; padding-top: 0px; padding-right: 0px; padding-bottom: 1px; padding-left: 50px; margin-top: 0px; margin-right: 0px; margin-bottom: 30px; margin-left: 60px; line-height: 25px; font-size: 13px;} /*End About - Company -- */ /* Begin Customers - */ #customer_content {float: left; height: auto; padding-left: 35px; padding-right: 30px; padding-top: 30px; margin-top: 0px;} #customer_content img {float: right; width: 241px; height: 286px; margin-top: -147px;} #customer_blocks {margin-left: 90px;} #customer_blocks li {list-style: none; display:block; float: left; padding: 10px;} #customer_blocks img {border-style:solid; border-width: 1px; border-color: #CCCCCC; width: 156px; height: 105px;} /* End Customers - */ /* Begin Contact - */ #map {margin-left: 25px; width: 700px; height: 270px;} #contact_content {float: left; height: auto; padding-left: 35px; padding-right: 30px; padding-top: 30px; margin-top: 0px; width: 410px} #contact_content_right {float: right; height: auto; padding-left: 35px; padding-right: 30px; padding-top: 30px; margin-top: 0px; width: 199px} label {color: green; font-size: 12px; font-weight: bold;} input {height: 25px} input, textarea {border: solid;border-style:solid; border-width: 1px; background-color: #EBE0FE; border-bottom-color: #999999; border-left-color: #666666; border-top-color: #666666; border-right-color: #999999} submit {color:#FFFF00; border: none;} .btn {height: 35px; width: 109px; border: none; background:url(../images/submit.jpg); background-repeat:no-repeat;} .btn:hover {background: url(../images/submit.jpg) 0px 35px; background-repeat:no-repeat} #map a {color: green; font-size: 10px; font:Arial, Helvetica, sans-serif; text-align:center;} #map iframe {border:solid; border-color:#009900; border-width: 1px;} /* End Contact - */ /* Begin contact - vacancies-*/ #vacancies_content {float: left; height: auto; padding-left: 35px; padding-right: 30px; padding-top: 30px; margin-top: 0px;} #vacancies_content a {text-decoration: underline; color: orange; font-weight: normal} #vacancies_content a:visited {color: yellow;} #vacancies_content a:hover {color: yellow; text-decoration:underline;} /* End contact - vacancies --*/ #footerwrapper {width: 100%; height: 100px; background-color: #333333; border-top-width: 3px; border-top-color: #FFCC00; border-top-style: solid; position:relative;} #footer {margin: 0 auto; height: 100px; width: 700px;} #footernav {color:#CCCCCC; text-decoration:underline; height: auto; font-size:10px; margin-top: 0px;} #footerleft {float: left; width: 500px; height: auto; margin-top: 10px;} #footerright{float: right; width: 200px; height: auto; margin-top: 10px;} #footerleft p {color:#CCCCCC; margin-top: 0px; padding-top: 0px; text-align: left;font-size: 10px; text-decoration: none; padding-bottom: 2px; } #footerright p {color:#FFFFFF; margin-top: 0px; padding-top: 0px; text-align:right;font-size: 10px; text-decoration:none; padding-bottom: 2px;}Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>About the Company - Our Customers</title> <link href="../css/master.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="headerwrapper"> <div id="header"> <div id="headerleft"><img src="../images/logo.jpg" alt="logo"/></div> <div id="headerright"><img src="../images/phone.jpg" alt="phone"/></div> <div class="clear"></div> </div><!-- end header -> </div><!-- end header wrapper -> <div id="navwrapper" class="contact"> <ul id="prinav"> <li id="home"><a href="/"></a></li> <li id="about"><a href="/about"></a></li> <li id="services"><a href="/services"></a></li> <li id="contact"><a href="/contact"></a></li> </ul><!-- end the prinav ul list-> </div><!-- end nav wrapper -> <div id="secnav"> <ul> <li><a href="/contact">Contact Us</a></li> <li><a href="/contact/vacancies" class="selected">Vacancies</a></li> </ul> </div><!-- end secnav -> <div id="content_wrapper"> <div id="content_wrapper_header"> <h1>Error</h1> </div><!-- content_wrapper_header -> <div id="content_wrapper_page"> <div id="vacancies_content"> <h2>Error?</h2> <p>Unfortunatly your e-mail has failed. Please try again. This is due to the spam prevention software implemented.</p> <p> </p> <p> </p> <p> </p> </div><!----end vacancy content --> <div class="clear"></div><!-- dlear -> </div><!-- end content wrapper page --> </div><!--end content wrapper --> </div><!--end container --> <div id="footerwrapper"> <div id="footer"> <div id="footerleft"> <div id="footernav">Site Map</div> <p>Copyright © </p> <p>Registered office: 2NE</p> <p>Company No. 359 548 4584 12</p> </div><!-- end footerleft --> <div id="footerright"><p>test site</p></div> <div class="clearboth"></div> </div><!--end footer--> </div> <!--end footerwrapper --> </body> </html>
Reply With Quote
Bookmarks