Layout skeleton needed to solve problem.

[labiere]

Hi there. I have been trying to figure out how to position CSS elements for a layout I want to create, but I can't seem to manage it.
This is what I am aiming for:

http://blogs.zeidelicious.com/temp/layout.gif

If possible, I want to only be using CSS1 for this and have a cross-browser solution.

It seems that if I fix the text area width, then I get lots of empty space around it when viewed at higher resolutions. However, when I try to avoid fixing a width for the text area, the text area jumps down to below the DIV image when the window gets too small. I want to keep that text area in the upper right, but not let it get smaller than say, 300px -- if the window gets too small, I just want the text to bleed off the right of the screen and require a scrollbar to see it.

Can someone show me an outline of how elements should be nested for this effect and the relevant position, width, and float properties I should use.

Thank you.

[TiGG]

use absolute? :)

[labiere]

Maybe I'm not getting what you are driving at, but absolute doesn't seem to be the full solution. When I place the elements on my page absolutely (in this case, there are 3 elements), I can get the top left corner of each element placed where I like. The problem is that if the user reduces the window in size, the text sort of wraps and then continues under the image div. I don't want the text go any lower on the page than the bottom of the image.. If I use a width for the text area to prevent that, it fixes the problem of wrapping at low resolutions but then I get too much whitespace between the image and the text when the screen is at a very high resolution.