I am having trouble in coming up with a good idea on how to do this layout.
Click for the image.
So basically there are 2 columns. Left and right. Both columns are separated into the upper part and lower part (upper part is the same height in both columns). The upper part has a semi-opaque background image, through which one can see the background image (which is very variable, so taking screenshots isn’t an option). The lower part is plain colored.
The left column in the upper part (call it Area 1) contains elements, the height of which will dictate the height of the whole semi-opaque upper part of both columns. More text in Area 1 means that the semi-opaque part will become higher, to fit all the text.
The left column in the lower (Area 2) part contains elements which will enlarge the white background container if they won’t fit.
The right part contains one single box (Area 3), from top to bottom. Its height doesn’t influence the upper (semi-opaque) part at all, but it does influence, along with Area 2, the height of the white container below, which will have to become high enough to fit both of them.
So, how do I make the upper (semi-opaque) part stop right after Area 1? And how do I make Area 3 expand down without influencing the upper part, but influencing the lower part’s height? I know how to do this using JavaScript, but I need this working in CSS, at least for the latest browsers (I can place some JS for older browsers like IE7).
Thank you.
P.S.
Sorry for the not-so-clear title. I found it difficult to express this question in this volume of text, not to speak of a short title to describe it.
So, how do I make the upper (semi-opaque) part stop right after Area 1? And how do I make Area 3 expand down without influencing the upper part, but influencing the lower part’s height?
edit
My bad, absolutes won’t work. But you can actually do it easier with floats. Fixed example.