close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

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

Thread began 7/30/2009 12:08 am by skyll237680 | Last modified 7/30/2009 1:44 pm by skyll237680 | 2031 views | 6 replies |

skyll237680

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!

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

skyll237680

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!

Sign in to reply to this post

Ray BorduinWebAssist

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;

Sign in to reply to this post

skyll237680

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!!!!!!!

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

skyll237680

thanks so much!

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...