how can I make content in one column stay at the top?

I have a page I used CSS Sculptor to create and also have your Contact Form Solution Pack form on it. The main content area has two columns. Here's a link to the page contact.php

The problem I am having is that when the form in the column on the right expands to reveal all the validation error messages, the content in the sidebar on the left won't stay at the top of the column, it just moves down to the center of the column as the right column grows in height from revealed error messages.

The only way I could get the content in the sidebar on the left to stay at the top was to give it a style that put a bottom padding of 150%. Now it stays at the top, but it makes both columns expand to a huge height--the height it would need to be if all the validation error messages are triggered to appear.

I don't like having this huge space that isn't needed, but how else can I make the content in the left column stay at the top if I don't give it the 150% padding.

thanks so much, I just cannot tell you how much I would appreciate finding a better solution to this issue!

Please put up a sample page at a URL that demonstrates the problem. I will fiddle with it and see if I can't find a more elegant solution.

yes, here is a sample page column_issue.php

On this sample page, I have embedded all the CSS styles so you can easily see everything. The style I had created to fix the column issue, for lack of a better solution is commented out on this page so that you can see what it does without it.

This is the commented out style which is embedded on the page:

/* This style is used on the contact page left column sidebar so that as the right column form expands to reveal validation error messages,
it keeps left column content at the top of the column. (I have commented out this style on this page, so that you can troubleshoot the issue
and see the problem without any solution applied to it--the left column content does not remaining fixed at the top of its column)
.sidebar_Padding {
padding-bottom: 150%;
padding-top: 0px;
padding-right: 0px;
padding-left: 0px;
} */

I really appreciate your help!

This is a result of your using tables to layout your page. A no-no in modern html.

Anyway you can fix it by adding : valign="top" to the container td tag where the sidenav div is located.

Then moving the div down using a top margin in the css like:

#sidebar_left {
margin-top:120px;

I can't quite let go of tables for layout yet, till I really know more what I'm doing. I know it's not the modern way, but will it cause me rendering problems in browsers?

I added valign="top" to the container td tag as you suggested and it looks MUCH better, THANK YOU!

Now the page doesn't stretch on down forever as it did when I used the 150% bottom padding solution.

Two little issues still though:
1) in FireFox the bottom line of the form ends just below the form fields, but in Safari it stretches on down way below the form fields to the bottom of the page. Is there a way to make it behave in Safari the way it behaves in FireFox?

2) And how can I make that right column to be just a little taller than the form it contains, because the column itself is a bit too tall still.

Here's the link again with updated embedded styles, so you can see exactly how it is now after applying the fix you suggested.
column_issue.php

THANK YOU!!!!!!!

It will cause inconsistancies in rendering in browsers... so it is causing some of these issues.

It is all about setting margins and padding and differences in the default margins and paddings on different browsers particularly for tables and forms.

Also you use height:100% a few places. That is inconsistent in browsers as well and is probably causing #1 above.

thanks so much!