How do I "anchor" to the bottom of a sidebar?

[isthistaken]

Hi all.

I have finally designed a site from scratch (using a combination of tutorials) and have it almost exactly as I was trying to make it. The last thing (for now) I would like to accomplish is getting the content in a div to stay at the bottom of the side bar while the links within the sidebar remain at top. Take a look at http://drywaterentertainment.com/sites/drywatervideography/main.html . The stylesheet is located at http://drywaterentertainment.com/sites/drywatervideography/stylesheets/default.css .
Also, this is my first non-template design so if there is anything you notice very wrong, please feel free to let me know. I would love to work everything out and get started the right way from the start.

Thanks!

-Stephen

[Centauri]

You can do this with absolute positioning. First, though, a problem needs fixing - the menu div is set to 100% width and the left margin adds to this, pushing the div to the right forcing the page to be off-centre. So, first get rid of the width setting - the div will normally expand to full width anyway :#theHeaderLinks {
margin-left: 40px;
text-align: left;
color: #CCCCCC;
}

Next, set a relative position on the page container to provide a reference for absolute positioning contents :#page-container {
width: 750px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
background-color: #FFFFFF;
padding-top: 40px;
position: relative;
}
and then position the quote box to the right and up from the bottom ofthe page container sufficient to clear the footer div :#theBodySidebarQuote {
position: absolute;
width: 180px;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 10px;
color: #FFFFFF;
padding-top: 50px;
padding-right: 20px;
background-color: #003366;
padding-left: 10px;
bottom: 74px;
right: 0;
}

[isthistaken]

That's it. Thank you for your help! I followed your instructions and have just a few questions to understand why this worked.

I assume the value "relative" in #page-container {
width: 750px;
margin-right: auto;
margin-bottom: auto;
margin-left: auto;
background-color: #FFFFFF;
padding-top: 40px;
position: relative;
} allows anything within the "page-container" to position itself (if absolute) based only on the "page-container" instead of the entire site or screen-size. Am I understanding that correctly?

How did you decide to use the value 74 in #theBodySidebarQuote {
position: absolute;
width: 180px;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 10px;
color: #FFFFFF;
padding-top: 50px;
padding-right: 20px;
background-color: #003366;
padding-left: 10px;
bottom: 74px;
right: 0;
} instead of another value? Is this based on some of my other values but with added spacing?

Finally, everything is working exactly as I hoped except it still seems a bit to the right. I had decided it was fine which is why I didn't ask for help but if it can be fixed easily I would love to do it.

Your changes fixed the quotebox, but unless I did something wrong they seemed to have no effect on the center-positioning. However I did find the value: margin-left:10px; within "#shadow-page-container" which when removed did shift everything 10px to the left, making it a little more centered. It still looks too far to the right though. I have a feeling I caused this when I was making divs within divs (all the "containers") trying to create the shadow around the page).

Thank you again for your help.
-Stephen

[Centauri]

I assume the value "relative" allows anything within the "page-container" to position itself (if absolute) based only on the "page-container" instead of the entire site or screen-size. Am I understanding that correctly?
Correct - absolute positoning is relative to the nearest positioned parent, where "positon" is anything other than the default of static.

How did you decide to use the value 74 instead of another value? Is this based on some of my other values but with added spacing?This is based on the total height of the footer plus 10px gap, as the bottom value refers to the bottom of the container which also includes the footer.

Finally, everything is working exactly as I hoped except it still seems a bit to the right.
If you remove the width and margins from the body css, and apply the auto side margins to the overall container instead, the centering works - you had a body width set too narrow :body,td,th {
line-height: 150%;
font-family: Georgia, Times New Roman, Times, serif;
font-size: medium;
background-color: #FFFFFF;
}

#shadow-page-container {
width:780px;
background-color:#FFFFFF;
margin: 0 auto;
background-image: url(../images/Drywater_Madison_Wedding_videography_main-bg-shadow.jpg);
background-repeat: repeat-y;
}

[isthistaken]

Perfect. I appreciate your explanation of each of those.

Thank you again,

Stephen