How to align div at bottom of page, not bottom of screen

Question

I want to align the div at the bottom of the page, not at the bottom of the screen. When I do this:

#contact-block{ position: absolute; bottom: 0; left: 0; } 

div is placed at the bottom of the screen. When my page is long, I need to scroll down, and the div, which was supposed to be at the bottom, floats somewhere in the middle.

It may be a simple solution, but I just do not see it.

Here is my HTML:

 <div id="left"> <div id="submenu"> <span class="menutitle">Services</span> <ul> </ul> </div> <div id="contact-block"> <span class="contacttitle">Contact</span></div> </div> <div id="content"> </div> 

I also added a small image to illustrate what I mean:

The red div is a pin div.

Edit: I found a solution with jQuery and CSS. It may not be the best solution, but hey, it works.

JQuery

 var offset= $(document).height()-$("#contact-block").height()- $("#footer").height()-60; $("#contact-block").css("top", offset); $("#contact-block").css("left", $("#wrapper").position().left); 

CSS

 #contact-block { position : absolute; width:216px; height:100px; background:url(../img/contact-bg.jpg) repeat-x #5c5c5c; } 

Answer 1

You can completely place your div in place. This method requires a #wrapper element, which I'm not a fan of, but, hey, you have to make watches that you have to do.

In this example, I completely removed the #left div , as it was only needed for layout and was no longer needed.

HTML:

 <div id="wrapper"> <div id="submenu">This is services</div> <div id="contact-block">This is contact</div> <div id="content">This is content</div> </div>​ 

CSS

 #wrapper { position: relative; width: 960px; } #submenu { position: absolute; left: 0; top: 0; width: 320px; height: 320px; } #contact-block { position: absolute; left: 0; bottom: 0; width: 320px; height: 160px; } #content { position: relative; left: 320px; right: 0; top: 0; width: 640px; height: 640px; } //#content position is relative for the #wrapper to stretch. //The left property is equal to the width of the #submenu or #contact-block element 

A good point about this method is that it gives you cleaner HTML. I believe that it will be easier to make a mobile version of your version if such a need arises.

jsfiddle

Additional thought: The #wrapper element can be easily removed in favor of the body element, which is a big step towards semantic HTML. Check this!

Answer 2

The position of your absolute position element depends on the first ancestor element that does not fit static (which is the default, so you must explicitly set it to relative (or absolute )).

So, make sure your #left container has 100% documentation and position:relative , and all is well.

Answer 3

You can look at columns with the same height: http://css-tricks.com/fluid-width-equal-height-columns/ .

In simple cases, this may be enough (I assume that your #left column #left floating to the left and the content column is floating to the right, and there is no other shell element, just body ):

 body { position:relative; } #contact-block { position:absolute; bottom:0; left:0; } 

Remember to add a clearer <div style="clear:both"></div> element to the bottom of your body .

Answer 4

I would suggest putting a red div in the right long div and at the end of it. Then use position: relative and the negative left margins on the red div to bring it to the left. That way, as your right div expands, your red div always stays at the bottom.