Hello Guys

I read Kevin's article on CSS and columns. It was most fascinating. Since http://vitamin-shoppe-online.com/ uses the same layout as Kevins is talking about in his article I decided to try his method of CSS layout versus mine. What I was most interested in was seeing if my CSS layout could be tweaked to force columns of equal height.

Well, I went to work putting Kevins tutorial to work for my site test page at http://vitamin-shoppe-online.com/test2.shtml

The results are quite nice, however I ran into a few problems that have prevented the page content from working properly.

Originally, the left and right columns were spose to be 100px in width and the content was L and R margin set at 100px

I changed the columns to 20% each in order to widen them and also I changed the left and right margins to 20% each (instead of 100 px each) in an effort to center the content block neatly between the two columns.

What happened was that I ended up having problems with the content block. Either the text within the content block was too close to the columns or, if I used padding to pull the text in, it pushed the content block out of place, leaving gaps between the content block and the columns.

In addition, the footer block was pushed up behind the heading of the content block rather than falling at the bottom.

The styles that seem to be giving me the most trouble are the left and right column tags, the content tags and the contentcontent tags.

Most of the other styles are used to govern the content of the left and right columns and they do not seem to be causing the problem of content placement and footer placement.

Does anyone have the time to look at this?

The style sheet is http://vitamin-shoppe-online.com/new_layout.css All of the tutorials CSS code is listed towards the top of the CSS page, while the rest of the CSS code is mine.

I sure would appreciate the help.