Ever since I added a little CSS to my site many of my pages no longer work correctly. Every 2 or 3 months I get the itch to try to fix them but I never seem to be able to find a solution that actually works leading me to conclude either (1) CSS just doesn't really work for anything but really basic layouts or (2) I really don't know CSS well enough. It's probably more (2) but I tend to believe (1). (3) would be that my site layout sucks but lets skip that option for now.

So, here is a challenge for all your CSS advocates. Can you make my site work in CSS? Note: You don't have to reproduce the entire site or even individual pages, you just need to send me some HTML + CSS that duplicates the basic design decisions of this site.

Here there are:

Front Page (http://greggman.com)

1. The page is basically never wider than 1026 pixels but will scale smaller if the window doesn't fit 1026 pixels. On the other hand, it will never scale smaller than a certain amount (center column appox 350 pixels)

2. The banner size matches the size of the scaled content (front page only)

3. The left, blog and right columns are 147pixels, 130 pixels and 140 pixels respectively.

4. If the content in any column does not fit the size specified that column scales to fit (and all parts of the column must scale to match)

Content Pages

1. On content pages, the center column is 512 pixels wide but will scale to more if the content is wider than 512 pixels. All areas much match in size.

2. The content on content pages can be nearly any HTML (little or no or css is used inside the content currently and I'm not going to go through and add it to 1000+ pages)

Of course it goes without saying that the solution must work in IE5, 5.5, 6.0, Mozilla, Firefox, Safari and Opera.

To give you some examples. I couldn't get any of the pages to work with 100% CSS. The biggest problem is getting the various areas to scale to the largest size.

Problem #1:

Here is 1 column, 3 divs, width set to 100 pixels, second div has content that takes more than 100 pixels

CSS based	Table based
normal content contentthatistoowide normal content	normal content contentthatistoowide normal content

Notice the table adjusted all 3 areas to match the largest area. In IE the wide content area stretched to fit but the other 2 didn't making it really ugly. In Firefox the wide content area didn't stretch to fit, the content just spills out, also ugly.

Now of course I used 3 separate divs only in the div case. Better might be to make a surrounding div, set its width to 100 pixels. Inside put 3 divs with their width set to 100%. According to the CSS manual a width setting of 100% is a percent of the width of its parent.

Well, you can see the problem. In IE the two divs with normal content did NOT expand to 100% the width of their parent even though the parent's width was clearly expanded to fit the large child div. In Firefox nothing expanded. The parent is still 100 pixels, all 3 of the divs spill out and the wide content spills out of its div. BAD BAD BAD!

Currently I solve that problem by just not using divs on my site for those kinds of things and instead sticking to old fashioned tables.

Problem #2

As far as I know Firefox displays this page correctly where as IE does not. In IE, the right border of the middle column is missing. So far the only way I've found to get that to work is just to switch back to 100% tables.

If you know how to get all this to work with CSS I'd would love to hear how. Note that I don't want to hear how I should get my page to validate unless you can show me a validating page that fixes the problems. As far as I can tell I'd made several small samples that validate and they still show all the same problems.