I’m having a bit of a problem with the layout of my page.  I’ve got the various sections all laid out, except the right section, which is the actual content section.

The Left section, which is the navigation area, will vary in height depending as new items are added.  If I use relative positioning on the content area, its position on the page changes as the height of the navigation area changes.  If I use absolute positioning, for some reason it’s under the left area, despite my very clear top and left notation.

Would someone please take a look and see if they can figure out what I’ve done wrong?

The url is http://opensource.eledanthe.com and the name of the stylesheet is style2.css.

EDIT:  Fixed the URL above ... seems a comma got in there somehow ... the link works now.

Its quite a simple layout you have there, but the wrong css-coding. Don’t use positioning, you’ll only be complicating your design.

I’ll explain briefly what you should do.

1. Give your #leftpane the width its supposed to have, and put float:left; in your css. Do not specify any height.
2. Since you’re having a container for your main contents, identify it with an id #content instead of class .content. Give it the width, but do not specify any height and float:right;
3. Now, that you’ve done that, specify clear:both; for your #footer.

4.remove the unnecessary positioning codes.

In case you still have problems, you can post it here or mail it to me via my website, i’ll reply ASAP.

Regards..