YsA.Net

Last week I posted the CSS Challenge. I got some great responses, but unfortunately they were a little problematic. I'll explain :

1. The first solution by Ohad, was this page. The problem with this solution was the "bottom" div. It created the bottom margin for the red panel. But suppose the red panel is a container which contains a grid and a scrolling div. The grid needs to be contained inside the panel. But because the size of the red panel contains the size of the margin, the bottom of the div with the grid will be hidden by the "bottom" panel.
2. The second solution by Alex, was this page. It worked like a charm. But it doesn't apply to IE6 browsers - it simply doesn't work on them.

So, I'm refining the definitions of the challenge :

• You need to create this design using CSS classes only.
• Each panel can be a div or asp.net panel control.
• The panel should adjust automatically when the window resizes - the white panel should always cover the browser content.
• You can not use CSS expressions or JavaScript.
• No scroll bars are shown.
• The margins between the panels will always be 10 pixels.
• Each div is suppose to be a container for items. That means that if I add a div inside one of the panels and set it to 100% height and width, it will occupy the entire panel, with nothing to hide parts of it.
• The solution must work on IE6,IE7,firefox.

I dare you to try...