dynamic footer appearance

[h4r00n]

Hi, I have a footer in my results page for a search form, the footer operates correctly as in it automatically places itself at the bottom of the page depending on how many results are shown. Like a dynamic footer, but the problem is that the footer is centered and I want it stretched across the width of the page. I have the code below, what can I insert to change it to stretch? I have added a print screen of how my other pages are and I want this footer to be the same as it.

 

<div id="footer" style="float:right;">

	<span style="font-family: Arial, Helvetica, sans-serif"><a href="">Home</a> | <a href="">About Us</a> | <a href="">Site Mape</a> | <a href="">Terms & Conditions</a> | <a href=""> Contact</a>
	<br>Copyright 2009 JobJar.co.uk

    </span></div>
</div>
</body>
</html>

 

[attachment deleted by admin]

[saltedm8]

several ways really but since you have used inline styles, this is easyiest for you

 

<div id="footer" style="float:right; width:100%; margin:0; padding:0;">

      <span style="font-family: Arial, Helvetica, sans-serif"><a href="">Home</a> | <a href="">About Us</a> | <a href="">Site Mape</a> | <a href="">Terms & Conditions</a> | <a href=""> Contact</a>
      <br>Copyright 2009 JobJar.co.uk

    </span></div>
</div>
</body>

</html>

 

this will work as long as the footer is not wrapped in some kind of container.. if this don't work, please post a link to your site.

[h4r00n]

Hi, it still doesn't work. Here is the link to my search page http://www.rjennings.co.uk/haroon/search.php you can see that the footer below is centered and I need it stretched. Thanks

[saltedm8]

that very last <div> you have there, move it to

 

<image src="images/spacer.gif" style="margin-bottom:4px;">
</div> </div> <---- here 

 

it is wrapped in the container, so once you have done that the rest of my code should work

[saltedm8]

sorry, thats not quite right.. its 2 divs you need to move.. like this

 

<img src="images/spacer.gif" style="margin-bottom: 4px;">
</div>

</div>

              </div>



<div id="footer" style="float: right; width:100%;">

	<a href="">Home</a> | <a href="">About Us</a> | <a href="">Site Mape</a> | <a href="">Terms & Conditions</a> | <a href=""> Contact</a>
	<br>Copyright 2009 JobJar.co.uk

</div>

 

should give you the result you want

[h4r00n]

Hi, I cannot get it to work, maybe because there are more files involved. I have attached the footer file and the configuration file, can you please have a quick look? The online search form I showed you is on somebody's server.

 

Thanks

 

[attachment deleted by admin]

[saltedm8]

try the attached, that way the divs will only be applied once 

 

[attachment deleted by admin]

[h4r00n]

HI

 

Thanks for that but the footer is now verticle, I also have a style.css file, will that have anything to do with it?

#footer {
	text-align:right;
	line-height:24px;
	width:720px;
	background-color:#dcdcdc;
	color:#4a4a4a;
	font-size:12px;
	padding-right:80px;
	}

#footer a {color:#4a4a4a;
		text-decoration:none;
		}

 

[attachment deleted by admin]

[saltedm8]

possibly, remove width:720px;from the footer div

 

I really need to see your template online, I am presuming the one you have online is either not yours, or is not the one you are working on..

 

otherwise I cant guarantee my answers, that's why it has taken this many posts to help you

[haku]

You have to restructure your HTML.

 

Right now you have a container, with all your elements including the footer inside it:

 

 

You need to pull the footer out of that container - it's limiting the width of the footer. So re-write that code like this:

 

<div style="width:800px">
  // all your content
</div>
<div id="footer">footer stuff</div>

 

Then you need to remove the float on your footer, and add a width of 100%.