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

The first solution by Ohad was this page. The problem here is 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.

The second solution by Alex, was this page. It worked like a charm. But it doesn't apply to IE6 browsers.

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

  • You need to create design using CSS classes only. * Each panel can be a div or 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.

Are you up for the challenge?