Evening all

 

I have my footer set so its always at the bottom of the page and id like to now position a bottom naviagtion area just above it but how do i get it there?

 

I tried bottom:0; but it just placed it behind and to the left of my footer. Do I need to put a wrapper around the footer and bottom nav bar?

 

Cheers

 

Ja

put it in a wrapper and it seemed to work fine.

Can we have some code to troubleshoot?

I'm using my phone at the moment so I'll drop the code in in the morning for you check out what I did. Cheers for the reply.

here is the code optimus:

 

HTML

<div class="footbotwrap">
<div class="botnav"><div class="width_limiter"><p>Keystone IMC Ltd is an appointed representitive of Burns-Anderson Ltd, which is authorised and regulated by the Financial Services Authority. Burns Anderson Ltd is entered on the FSA register (www.fsa.gov.uk/register) under reference 126191.</p></div></div>
<!--START OF FOOTER-->
<div class="footer">
	<div class="width_limiter"><label>Share it:</label>
	<div class="socialshare">
			<a href="http://www.facebook.com/share.php?u=http://www.keystonemortgages.co.uk/find.html;title=Keystone IMC Ltd: Independent whole of market mortgage advice " target="_blank">
			<img alt="Share with Facebook" src="images/facebook.png"/></a> 
			<a href="http://twitthis.com/twit?url=http://www.keystonemortgages.co.uk/find.html;title=Keystone IMC Ltd: Independent whole of market mortgage advice " target="_blank">
			<img alt="Share with Twitter" src="images/twitter.png"/></a>	
			<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=http://www.keystonemortgages.co.uk/find.html;title=Keystone IMC Ltd: Independent whole of market mortgage advice " target="_blank">
			<img alt="Share with Google" src="images/google.png"/></a> 
	</div>
	</div>
</div>
</div>
<!--END OF FOOTER-->

 

CSS

.footbotwrap{
width:100%;
height:121px;
position:absolute;
bottom:0;
}
.botnav{
height:80px;
width:100%;
background-color:#333333;

position:absolute;
color:white;
font-family:verdana;
font-size:12px;
}
.footer{
height:40px;
background-color:#212121;
border-top-style:solid white 1px;
position:absolute;
bottom:0;
width:100%;

}
.footer label {
font-size: 13px;
color: #FFFFFF;
float: left;
padding-right: 10px;
padding-top: 15px;

}

.footer .socialshare 
{
float:left;
margin-right: 30px;
padding: 10px 2px 0px 4px;

}


.width_limiter {
width: 925px;
margin-right: auto;
margin-left: auto;
position: relative;}

 

It seems to do the trick but is it compliant?