Need help getting css layout to work

I've got the basic concept but the execution leaves a lot to be desired.

I can't figure out why I cannot get a three column layout to work properly.

Any help that can be offered will be greatly appreciated.

This is the page I'm working on currently.

There is definitely rep in it for helpful advice.

Thanks

 

It would be best to use <divs> for this.

When you setup the widths to make the colums align right and all fill up you need to work out the divison of the width by 3. Then make a id or class and set it to that value, then you can use float: left; which will tuck them all together.

After that then you can pull them down with clear: both; id at the bottom of the colums.

 

You can fix the width by px.

 

The main problem is that the footer is getting covered. I can't figure out how to keep this from happening.

 

Simple fix:

Get rid of the height: 100% in the css for your leftcatlist and rightcatlist. It stopped over lapping after I removed them.

z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */

Code (markup):

Might as well get rid of that too. It only works for positioned items. (check w3 if ya' want)

 

That worked in ie, but not in FF when sized at 800x600 This css stuff is very frustrating.

 

Try creating a new div and putting all 3 columns inside it and then close it just above your footer. Under that div put the <br style="clear: both;" />. Not sure if that'd actually work but it has worked for me before with similar problems to yours.

Also, I changed my resolution to 800x600 and viewed the site in FF and the footer wasn't covered at all.