lock specific LI to bottom of page

[Zane]

I'm sure the use of position or a negative bottom margin would do this, but then again, I'm not too sure.  What I'm trying to do is take one specific LI, which has an id of "contact" and place it at the bottom left of the screen in a fixed position.

 

http://reallycheapfloors.com

 

If you look at the source, I have this for the navbar

Contact Us.
About Us
Unfinished
Prefinished
Laminate
JANKA Scale

 

It's CSS contains this

div#nav {
height: 100%;
width: 145px;
background-color: black;
background-color: #8C9AA3;
background:url(gradient.jpg);
background-size: 100% 100%;
font-family:"Arial";
margin: 0px; padding: 0px;
padding-top: 0px;
font-weight: bold;
position:fixed;
color:white;
border-right: 1px solid black;
}
div#nav ul {
list-style:none;
margin: 0px;
padding: 0px;
}
div#nav li  {
padding:6px 3px;
text-align:right;
height: 30px;
}

div#nav li a {
text-decoration: none;
color:#eee;
width:100%;
height:100%;
}
div#nav li {
background-color: 649DE8;
}
div#nav li:hover {
background-color: #1364CF;
color:white;
cursor:pointer;
}
div#nav li:hover a {
cursor:pointer;
}

div#nav li.contact {
background-color:#DB4848;
text-decoration: none;
color: white;
font-weight: bold;
font-size: 22px;	
}
div#nav li.contact:hover {
background-color:#FF3C00;
}

 

What would be the easiest method to move that red Contact button to the bottom of that blue bar.?

[AyKay47]

If you want a fixed position, use the fixed value of the position property. Like so:

 

http://jsfiddle.net/H5McR/

 

So if the user scrolls down, that button will always be displayed in the bottom left of the screen.

[Zane]

Gah, everytime I post a thread I figure the solution out immediately after.

div#nav li.contact {
# background-color:#DB4848;
text-decoration: none;
color: white;	
font-weight: bold;
font-size: 22px;
position:absolute;
bottom:0px;
left:0px;
width:130px;
}

I suppose this is solved now.

[AyKay47]

Gah, everytime I post a thread I figure the solution out immediately after.

div#nav li.contact {
# background-color:#DB4848;
text-decoration: none;
color: white;	
font-weight: bold;
font-size: 22px;
position:absolute;
bottom:0px;
left:0px;
width:130px;
}

I suppose this is solved now.

 

Do you want the <li> to stay in the bottom left of the screen even when the page is scrolled, or just until the page is scrolled?

[Zane]

at the bottom left.. ALWAYS, even when scrolled.  Which I believe is what is does now

[AyKay47]

I didn't notice that the parent div #nav is set to a fixed position, so using absolute positioning on li.contact is fine, since the entire parent div will not move when scrolled.