Postioning Problem

[kettledesign]

I have a CSS layout that contains two colunms which are inside a DIV (#frame).

The left column is where the main information for the site will be going. (#content)

The right column has two DIV's (#nav and #other).
This is where the problem is I want #nav to be aligned in the column but at the bottom of the browser window.
#other will be at the top of the column which I have done

CSS code is (so far):

#frame { 
 margin: 0 auto;
 padding: 0;
 width: 730px; }
#nav {
 float:right;
 display: block;
 margin: 0 0 0 0;
 padding: 0 0 0 15px;
 width: 215px; }
 
#content { 
 display: block;
 float: left;
 margin: 0;
 padding: 0;
 width: 500px; }
 
#other { 
 display:block;
 float: right;
 margin: 41px 0 0 10px;
 padding: 3px 0 0 10px;
 text-align: right;
 border-top: 1px dotted #003366; 
 width: 210px;}

XHTML to go with it is:

<div id="frame">
 <div id="content">
 <h1 title="Web Log Name">Semi Daily Weblog about anything and everything</h1>
 <h2>by Author</h2>
 <h3>Web Log</h3>
 <p>
  Information about the website will be going here <br /> and here
 </p>
<h3>14 January, 13:13 ¦ Sample Title</h3>
<p>
Content will be going here <br />and here
 </p>
<p>
Also Content will be going here <br />and here
 </p>
</div>
 <div id="other">
  <h5>
  Here will be some advertisments to help the site out. If you are intresting in advertising here 
  </h5>
 </div>
 <div id="nav">
 <ol>
  <li id="active">&raquo;&nbsp;<a href="index.html">Home</a></li>
  <li>&raquo;&nbsp;<acronym title="Not finished Yet">About</acronym></a></li>
  <li>&raquo;&nbsp;<acronym title="Will be done when this page gets a bit full">Archives</acronym></li>
  <li>&raquo;&nbsp;<a href="http://validator.w3.org/check/referer">Vaild XHTML</a> ¦ 
<a href="http://jigsaw.w3.org/css-validator/check/referer">Vaild CSS</a></li>
 </ol>
 </div>
</div>

If anybody can help with my problem i would be gratefull,
Thanks

[BlobFisk]

Hi kettledesign,

The way you are laying out your site with nested divs will make it difficult to achieve the bottom positioning that you are after.

At the best of times getting an element to align to the bottom is tricky (as bottom: is poorly supported and that just leaves a scripting solution).

Have a look at some of the layouts outlined here (by Suzy_UK among others) and on bluerobot and glish, they may provide you with an alternative way or laying out your site.

HTH