|
CSS - Footer Problems..
Hello all, I had a question about the CSS file I was using for my site.
I have a multi-column setup, with header, nav, content, right column, and footer as the columns. Now everything except the footer are together. The footer is spaced from the rest of the page, and I'd like it to connect to the bottom of the page. My CSS: * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #000; background-color: #3b5999; } h1 { font-family: "Trebuchet MS"; font-size: 20px; color: #000; } h3 { font-family: "Trebuchet MS"; color: #000; font-size: 12px; } A:link { font-family: Verdana; font-size: 12px; color: #000; text-decoration: none; border: 0; } A:visited { color: #000; text-decoration: none; border: none; } A:active { color: #000; text-decoration: none; border: none; } A:hover { color: #8CC1DF; text-decoration: none; } #wrapper { margin: 0 auto; width: 922px; } #header { width: 900px; padding: 10px; height: 100px; background-image: url(background.png); background-repeat: no-repeat; } #navigation { float: left; width: 900px; height: 42px; margin: 0px 5px 0px 0px; text-align: center; font-family: Arial; } #content { float: left; background-color: #fff; font-family: "Trebuchet MS"; font-size: 12px; color: #000; padding: 10px; height: 350px; width: 683px; margin-left: auto; margin-right: auto; overflow: auto; } #rightcolumn { background: #fff; padding: 10px; margin: 0px 0px 5px 0px; height: 350px; width: 195px; float: left; } #footer { width: 920px; height: 40px; padding: 10px; clear: both; margin: 0px 0px 10px 0px; background-image: url(footer.gif); background-repeat: no-repeat; font-family: Arial; color: #000; } Thanks in advance! Similar TutorialsI can't get a footer after at bottom of the page. The problem is my maincontent area is dynamic in size although i have edited this out. The footer appears to the left of maincontent and not at bottom. Code: ...
div#headerWrapper {
position:absolute;
top:5px;
left: 5px;
background: #63625e ;
width:1000px;
height:120px;
top:3px;
left: 5px;
border:2px groove black;
}
div#header {
position:relative;
top:5px;
left: 5px;
width:990px;
height:100px;
background: black;
border:5px groove #63625e ;
}
div#boxlayer1 {
position:absolute;
width:145px;
height:700px;
z-index:1;
left: 5px;
top: 125px;
border:2px groove black;
// background: green;
background-color:#63625e;
}
div#content1 {
position:absolute;
top:125px; /*border adds 2 px so i take them off*/
left: 165px;
width:850px;
height:900px;
z-index:1;
border:5px groove #666862;
background: black;
}
#footer {
clear:both;
float:none;
width:200px;
height:100px;
background: red;
border:5px groove #63625e ;
}
.....
</head>
<body bgcolor="#666862"> <?php include("navigation2.php"); ?>
<div id="navlist">
<div id="headnavlist">Site Features</div>
<ul >
<li ><a href='login.php'>Upload</a></li>
<li><a href='home.php'>Home</a></li>
<li ><a href='login.php'>Send Mesage</a></li>
<li><a href='home.php'>Message Outbox</a></li>
<li ><a href='login.php'>Upload</a></li>
<li><a href='home.php'>Home</a></li>
<li><a href='home.php'>Message Outbox</a></li>
</ul>
</div>
</div>
<div id="content1" >
asfafas
</div> <br><br>
<div id="footer">
asdsa
</div>
</body>
</html>
Hey. First post on here, so hopefully you lot are very helpful I've been asked to make a site for someone I know, and I've done the design, made most of it in CSS and a little php for navigation alerations. The URL for the website is: (URL address blocked: See forum rules) The problem that I'm seeming to have, is that in IE7 the footer only takes the value of the #bottom_container height, and ignores the #left and #right that are inside this container. Meaning that, the footer rides up to the middle of the page, as shown: [IMG](URL address blocked: See forum rules)[/IMG] Does anyone know how to solve this? It's performing well in Safari and Firefox, and even IE6! Just not the new one. I know it's something to do with the height of the botom container, but each page is going to have different amounts of content, so I cant set a height for all of them. Thanks very much! Nick. Firefox renders the page correctly, but IE likes to place the footer in random positions throughout the page. Not sure what's happening here. Look here. Once the page is cached, and the link is selected again, the footer displays correctly. This is very strange. If you clear your cash or refresh the page, it screws the footer up again. The happens on several pages. These are CSS sections for clearfooter and footer. Code:
#clearfooter {
clear: both;
height: 1em;
overflow: hidden;
}
#footer p {
position: absolute;
bottom: 1px; /* Fix for Mozilla spacing from bottom */
left: 150px;
height: 1em;
width: 534px;
color: #ffffff;
text-align: center;
padding: 3px;
margin: auto;
font-weight: bold;
font-size: .6em;
}
I appreciate any help on this... Thanks, Darin Hello! I am new to dreamweaver CS3 and need help with these two things: when I preview my site in IE my lightbox does not work. And my sticky footer does not stick to the bottom of the page. Please someone help me. Thank you in advance! I am having problems with my footer once I resize my to make my page have to scroll left to right. It displays fine until I do this. It makes my footer background not display all the way. Here is my css for reference: Code: .footerWrapper {
margin: 20px 0 0 0;
padding: 0;
width: 100%;
background: url(../images/content123bg.png) repeat-x;
}
.footer {
margin: 0 auto;
padding: 0;
width: 960px;
height: 155px;
}
.footer img {
margin: 10px 0 0 0;
float: right;
}
.footer h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #09F;
text-decoration: none;
text-align: center;
padding: 10px 0 10px 0;
margin: 0;
width: 145px;
}
h3.facts {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
color: #09F;
text-decoration: none;
text-align: center;
padding: 10px 0 10px 0;
margin: 0 0 0 -3px;
width: 145px;
}
.footer p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #CCC;
text-decoration: none;
text-align: center;
width: 140px;
margin: 0 0 0 2px;
padding: 0 0 5px 0;
}
.footer p a {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
color: #999;
text-decoration: underline;
}
.footer p a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
color: #FFF;
text-decoration: none;
}
#twitter_t {
margin: 0;
padding: 0;
}
#twitter_t img {
width: 150px;
height: 50px;
margin: 0;
border: none;
padding: 0 230px 0 0;
/* [disabled]float: left; */
position: relative;
}
#twitter_m {
width: 370px;
padding: 0 10px 0 0;
background:url(../images/twiiterbubble.png) no-repeat;
float: right;
height: 140px;
margin: -40px 0 0 0px;
border: none;
}
#twitter_container {
min-height:45px;
height:auto !important;
height:40px;
padding-bottom:10px;
/* [disabled]padding-right: 10px; */
}
#twitter_update_list {
width: 350px;
padding: 0 0 0 20px;
overflow: hidden;
font-family: Georgia;
font-size: 14px;
font-style: italic;
color: #000;
line-height: 16px;
font-weight:bold;
}
#twitter_update_list li {
width: 350px;
list-style: none;
margin: 60px 0 0 0;
}
#twitter_update_list li a {
color: #FFF;
border-bottom: dotted 1px;
text-decoration: none;
}
#twitter_update_list li a:hover {
color: #09f;
}
Here is my HTML: Code: <div class="footerWrapper">
<div class="footer">
<div class="fltlft">
<h3>Quick Links</h3>
<p><a href="http://www.beckin.com/">Home</a></p>
<p><a href="http://www.beckin.com/portfolio.html">Portfolio</a></p>
<p><a href="http://www.beckin.com/css-menus.html">CSS Menus</a></p>
<p><a href="http://www.beckin.com/free-templates.php">Templates</a></p>
</div><!-- end fltlft -->
<div class="fltlft">
<h3>Help</h3>
<p><a href="http://www.beckin.com/support/">Custom Quotes</a></p>
<p><a href="http://www.beckin.com/support/">Support</a></p>
<p><a href="http://www.beckin.com/support/">Webmasters</a></p>
</div><!-- end fltlft -->
<div class="fltlft">
<h3 class="facts">Facts</h3>
<p><a href="#">Privacy Policy</a></p>
<p><a href="#">Terms of Use</a></p>
</div><!-- end fltlft -->
<div id="twitter_t">
<a href="http://twitter.com/beckindesigns"><img src="images/top.png" alt="free web templates" /></a>
</div><!-- end twitter_t -->
<div id="twitter_m">
<div id="twitter_container">
<div id="twitter_update_list"></div>
<!-- end .twitter_container --></div>
<!-- end .twitter_t --></div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/beckindesigns.json?callback=twitterCallback2&count=1" type="text/javascript"></script>
<!-- end .footer --></div>
<!-- end .footerWrapper --></div>
Any help with this would be very appreciated. Hello, I am trying to change the layout of my journal which is based on CSS. The codes doesn't come from me. I found it two years ago on a free layout website where all layouts are allowed to be changed if there are credits given for the original style sheed. I am afraid my problem is pretty simple. I don't know very much about programming and CSS, just very few. So please snap at me immediately if I don't understand fast enough or don't give you exactly the answers you need. Anyways I will give my best! My problem: I want to change the footer and something what is supposed to be called the header. I would say: Let's concentrate on the footer at first. I want to change both from their background color to an image. The text still have to be able to be read. I have read something about putting the footer in the body but there is my normal background of the whole journal and I think it would make problems this way. Well I don't know if the codes are messy. I changed a few colors and positions but even that not fully until now. I hope you can get a clue what is my problem! And thank you so far! Here are the codes from my footer: Quote: #footer { text-align: center; font: 7pt arial, sans-serif; background: #fff url(here would stand the image url but as newbie I am not allowed to post urls, you know the rules) repeat; color: #BBBBBB; z-index: 100; clear: both; border: 0px; padding: 10px; } Hey everyone, So I'm working on a website for a client and I am running into a bit of a weird problem.. The home page displays as follows: http://www.beitelligent.com/clients/keldan/index.php As you can see, the footer is pushed to the absolute bottom - where it should be.. this is displaying correctly. I began to make sub-pages and ran into the problem, where the footer isn't pushing to the bottom.. http://www.beitelligent.com/clients/keldan/about.php - Any ideas?? Any help is appreciated. Thanks, Peter Barbosa Hi all, I have a page with a sticky footer. It's all working great thanks to the sticky bottom tutorial from Ryan Fait. I already contact him but his wrists are broken so he can't do anything. This is the website we're talking about: - www .rokjesdagloop .nl And here is the deal: - As you can see the footer stays at bottom so I insert the sticky bottom tutorial wich lead us to this: www .rokjesdagloop .nl /test .php But I want the footer a little bit inside the content so the text overlaps the girl a bit on the background. I tried several things on the margin's and the heights but still nothing that works. Does anybody have tips or codes? Would be great! Thank you in advanced! Regards, Jonathan I've been puzzling over this for a while now! I'm trying to make the footer stick to the bottom of the page even when the content isn't long enough. I have read many tutorials but none of them ever seem to work out quite right. I have created two pages to demonstrate the problems that I am having. http://www.explosiveracing.net/xmed...all_content.htm This is a page without much content and as you can see the footer is pushed to the bottom. All is well in FF but in IE the footers background seems to randomly disappear. Sometimes on a refresh it reappears but I cant work out what is causing it. http://www.explosiveracing.net/xmed...ong_content.htm This page has a large amount of content that pushes the footer further down. In IE though, the content partially overlaps the footer and the background image also still randomly disappears! Any ideas? I'm having trouble with my website structure... view this page for an example... css is here... The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page... It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF... how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF? Thanks Bryan I am developing a web site, panopticinsight dot com. The header/banner looks fine in Firefox. In IE7 and Opera, the H2 subtitle is left aligned over the globe image. In IE6 content jumps outside of container. Anyone know why there is a shift, and what I can do about it? Style sheet code pasted below: Code: body {
width:800px;
font:0.83em/1.4em Tahoma, Geneva, sans-serif;
color:#CBD4E3;
background:#000 url(images/body_bg.gif) repeat-y top center;
letter-spacing:1px;
margin:0 auto;
}
h1,h2,h3,h4,h5,h6 {
font-family:"Times New Roman", Times, serif;
font-style:italic;
font-weight:bold;
color:#e9df55;
background-color:#000;
}
h2 {
font-size:2em;
}
h3 {
font-size:1.5em;
}
h4 {
font-size:1.25em;
}
a:link {
color:#8090AC;
text-decoration:none;
}
a:visited {
color:#B17F6C;
text-decoration:none;
}
a:hover {
color:#E9DF55;
text-decoration:underline;
}
a:active {
color:#E9DF55;
text-decoration:none;
}
#container {
width:760px;
margin:0 auto;
}
#header {
height:200px;
width:760px;
margin:0;
padding:0;
}
#banner {
height:100%;
width:100%;
color:#cbd4e3;
background:#000 url(images/header_bg.jpg) no-repeat top left;
margin:0 auto;
padding:0;
}
#banner h1 {
font-size:400%;
color:#CBD4E3;
background-color:transparent;
float:left;
display:inline;
margin:0;
padding:70px 0 70px 280px;
}
#banner h2 {
font-size: 12pt;
color: #e9df55;
background-color:transparent;
text-indent: 200pt;
vertical-align: text-bottom;
}
navigate{
color : #105BAC;
background-color : transparent;
height : 20px;
font-size: 100%;
border-top : 1px solid #999999;
}
#navigate ul {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
padding: 2px 0 0 0;
}
#navigate ul li {
display: inline;
}
td {
font-family: Arial, Helvetica, sans-serif;
}
th {
font-family: Arial, Helvetica, sans-serif;
}
p {
font-size: 14px;
color: #FFFFFF;
left: 50px;
right: 50px;
}
#main {
width: 660px;
padding-right: 50px;
padding-left: 50px;
}
#footer {
font-family: "Times New Roman", Times, serif;
font-size: 9px;
color: #666666;
height: 100px;
width: 760px;
vertical-align: text-bottom;
text-align: center;
}
#SplashImage {
float: left;
}
.image-left {
clear: none;
margin-bottom: 10px;
float: left;
margin-right: 20px;
margin-left: 10px;
}
.image-right {
clear: none;
margin-bottom: 10px;
margin-left: 10px;
float: right;
}
I want my footer to have no whitespace under it (like 1px ). I have it set like this: #footer { border-top:1px solid; text-align:right; margin:0px; font-size:smaller; padding-bottom:0px; } and it doesn't work so I'm guessing it is somewhere else in the file but I've tried messing around with most (all?) of the padding / margins and it still doesn't work. How could I do this? What I want is like the footer at http://www.oswd.org . Hi, Im trying to make my footer on my page be a certain height of around 150px. BUT I want it to fill to the bottom of the page even when there is less content or the window is made larger or smaller. So basically a sticky footer which fills to the bottom of the page. An example would be the footer he yoast.com My current CSS is he #fwrap { background-color:#BAAE9F; border-top: 1px solid white; border-top-width: 1px; border-top-style: solid; border-top-color: white; width:100%; height:100%; height:145px; } Any help would be appreciated! Thanks Hey All, I'm stumped on a problem I'm having with css. Here's the website I'm working on: johnraymondonline.com/mjbfoundation/ It's wordpress and I was working to modify a template. The problem I'm having is with the div for the footer. I've made the width 100% and it's not expanding the full width of the page. I've checked to see if it was encased in a div and it appears as if it isn't. I'm not sure what to do at this point...use absolute positioning? Any help would be appreciated. Thanks in advance!!! Hello. Maybe this would be a better post on CSS. Here is my code. Right now I'm trying to add a set of links at the bottom of the web page. Any thoughts? This has been driving me nuts! Thanks again everyone HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "(URL address blocked: See forum rules)">
<html>
<head>
<title> Attorneys at Law, New York Lawyer</title>
<meta name="" content="">
<META NAME="Generator" CONTENT="Microsoft FrontPage 5.0">
<meta name="KeyWords" content="HTML">
<link rel="stylesheet" type="text/css" href="index.css" />
<script src="index.js">
</script>
</head>
<body>
<div id="mainContainer">
<div id="topBar"><img src="webbanner.jpg" width="760" height="100">
<!--#include file="left_bar.shtml" -->
<!-- Main Content-->
<div id="mainContent">
<!-- Google Search-->
<form action="" id="cse-search-box">
<div align="right">
<input type="hidden" name="cx" value="013298611985327428493:xedrvpp2ns4" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="(URL address blocked: See forum rules)=cse-search-box&lang=en"></script>
<!-- BreadCrumb Nav-->
<div id="navBreadCrumb">
<a href="(URL address blocked: See forum rules)">Home</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<a href="">Areas of Practice</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<a href=""> Real Estate</a>
<img src="breadcrumb_arrow.png" width="8" height="5" />
<strong>Foreclosure</strong>
</div>
<h1><font face="times new roman, times, serif" size="5">About Our Firm</font> <hr size="2" width="100%" />
<!-- end content --></h1>
<p align="justify"><strong>Lawyer</strong> is a full-service law firm with conveniently located offices in ... and ... Counties. As the largest suburban general practice in ..., we have a skilled team of 31 attorneys, including a physician-attorney, as well as two on-staff Registered Nurses and an extensive support staff to serve our clients.</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<h5>Why should you choose .... at your New York Attorney?</h5>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv </p>
<p align="justify">individual circumstances.</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<h5>Affiliations</h5>
<p align="justify">Test Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestvvTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test TestTest Test Testv</p>
<p align="justify">Please visit our <a class="con" href="practice_areas.php">
areas of practice</a> for further information on our legal services or <a class="con" href="email.php">
contact us </a>directly for an initial consultation.</p>
</div>
</div>
</div>
</body>
</html>
CSS Code:
html{
height:100%;
}
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:0.8em;
margin:0px;
padding:0px;
background-color:#001b4f;
text-align:center;
}
.clear{
clear:both;
}
#mainContent{
padding-right:10px;
padding-left:210px;
padding-bottom:10px;
background-color:#fff;
}
#mainContainer{
width:760px;
text-align:left;
margin:0 auto;
background-color: #fff;
border-left:1px solid #272727;
border-right:1px solid #272727;
padding-bottom:10px;
}
#topBar{
width:760px;
height:100px;
padding-bottom:0px;
padding-top:0px;
border-bottom:2px solid #272727
}
#searchbox{
position:absolute:0,0;
}
#leftMenu{
width:200px;
padding-left:10px;
padding-right:1px;
float:left;
background-color: #fff;
padd
padding-top:25px;
}
#botTable{
display: table-footer-group;
float: top;
bottom: 100%
Hi all, I'm having troubles with my footer and I hope someone will be able to help: test.katiefleming .ca (remove space) User: wendy Pass: letmein The footer is supposed to span across the bottom forever should the user increase the browser window (this works). However, my text moves as the window is expanded/contracted. I want it to be fixed. No idea how to do this. Any help would be great! I've read through a few CSS documents and I can't find any references to this, so excuse me if I've missed something (which I hope I have!). I want to be able to place a footer on my pages and always have it stuck to the bottom of the browser window, regardless of the amount of content in the page. So even if the page were nothing but the header and footer, the footer would be right at the bottom of the page. Can I do this in CSS? Code: http://xbox-free.co.uk/ Can anyone advise as to why my footer is overlapping/floating to the right? Cheers, Neil Here is my page: http://dev.donmyersministries.com/ The CSS in on the page itself still. My problem: I want my footer to go at the bottom after the two columns, but I just can't figure it out. I have read several tutorials on keeping the footer at the bottom, but nothing has worked for me. This is my first (good) CSS only layout. Help! Thank you all. later |
|||||||