I am trying to create a web site that should (only) fill up the entire effective area of the (maximized) browser. This effective area is also known as the viewport and excludes elements like scrollbars and toolbars. Using this design no scroll bars will show up at the right site of the web page. It seems quite difficult to realize this design for all common monitor resolution (1024 x 768, 1280 x 800, 1680 x 1050 and 1280 x 1024) because of the picture in the right top corner.
The relative size of the picture compared to the rest of the web page will change when using different monitor resolution. For example, its width may be almost 50% of the viewport width when using a relatively low resolution, but its width may be only 20% of the viewport width when using a relatively high resolution. This will mean that the orange area will get too big.
I would like to use DIV to create the gray area below the picture. This area should be exactly as width as the picture. Also it should fill up the rest of the page vertically. I guess it is not quite straightforward to realize this, because of the (variable) height of the picture above it.
Let me know what you think.
Please take a look at the picture below to get an impression: