I've come across a basic CSS layout problem that has me completely stumped.

I introduced some javascript to switch CSS styles for displays with resolution of 1024, 1280, and 1600 pixel width. The goal was to have the center "content" column dynamically widen as the visitor's browser window width is adjusted, rather than the fixed column width format set by default.

I looked into other MT and typepad sites that have 3 basic columns defined, with one column that dynamically resizes. The code seems simple enough, I implemented it, and it looks fine under Mac/Safari browser and Mozilla as well I believe. However, under IE6 for Windows, I've received reports that only 2 of the 3 columns appears on the page. I guess the rightmost nav column is pushed to the bottom of the page. Again, I have no clue what is causing IE6 Windows to do this.

The base CSS code to define the 3 column format looks like this:



I use either #centerfront or #center depending on the page. You will note that the center column has no fixed pixel width, and it's left and right margins are fixed to be offset by the left and right columns, respectively.

You can view the sample problem page I have created here:

http://216.234.240.53/cssproblem.html

The CSS code being used for this page is here:
http://216.234.240.53/stylesproblem.css

Anyone who seems something basic I've overlooked, I would appreciate the help IMMENSELY. I am using some padding definitions which I have heard IE may not be overly happy with, but I don't see how this may impact the problem with only two of the three columns being displayed.

-----

My final problem is that the copyright footer should be appearing at the absolute bottom of the page as well (as it does under my fixed width CSS page definition). Instead, it is showing up above the rightmost column, directly beneath the left and center columns. I can't figure out how to force it down to the absolute page bottom, especially given the div clear=both code I've written that works fine under the other pages.

-----

If anyone can clue me in, I'd be most appreciative!!!

John Kranz

I've modified the code ever so slightly, by removing the 'overflow:hidden' code. It did not solve the problem, however. I'm wondering if something is wrong with how I've defined widths for the divs. Maybe something is exceeding the value I've provided, and it's causing problems with IE6...

As you can see, I'm still guessing as to the problem.

Made more changes, hoping that I'm getting close. I still have some padding definitions which I suspect are being problematic. I've also had to remove the copyright footer completely because it was positioning itself relative to the browser window rather than the absolute bottom of the page. I have to figure out how to force a div to appear below all other content that includes absolute position items.

http://216.234.240.53/cssproblem.html

The sage continues. An IE6 user now sees the right column overlapping the middle column when resizing the window. There is no way that should be happening. I'm using absolute positioning and margins for the center column to keep it spaced properly.

Solution? Heck -- I think I'm just going to work in a standard HTML table to get some control back on where these divs are appearing. I'm obviously not capable of resolving this issue in short order with any degree of confidence it's going to hold up with the various browsers out there.

Might I suggest the brilliant folks at the CSS Forum. I don't mean to run down anyone here, but as much as the mods here are experts at MT, the guys there are just _brilliant_ with css.

I'm sure they can help. =)

Thanks for that link, LisaJill! I hadn't seen that site before!

Kristine