Trouble positioning 2 DIVs inside a container DIV - css

Question

I have a container (DIV4), which contains two other DIVs (DIV2 and DIV3) side-by-side. DIV4 is contained inside another DIV (DIV1). Some info about each DIV:
DIV1: position is absolute. It's essentially a pop-up window to view a larger version of the image when a thumbnail image is clicked. It is simply moved on-screen to make it appear, and off-screen when the link is clicked to close it. Since the content can vary, it has no fixed width or height.
DIV2: A series of nested DIVs, these contain the large image, and use the nested DIVs to generate a frame and matting for the image. The DIV with the image itself (as a background image) has a specified width and height; the outer DIVs (including DIV2) do not, they simply use their margin and border settings to fit around the DIV(s) contained inside them.
DIV3: Contains a series of P and INPUT tags, with BR tags to easily control their vertical positions.
DIV4: Has no attributes, simply used to group DIV2 and DIV3 separately from other content of DIV1 that follows below them.
Originally, I tried using float: left on DIV2 to bring DIV3 up next to it. However, I believe the problem is that DIV1 and DIV4 do not have a specified width, so the browser doesn't know if there's enough space to move DIV3 next to DIV2. In IE, it positioned DIV3 correctly, but Firefox dropped all of DIV3 below DIV2. So I looked for another solution besides floats. I was able to use display: inline-block on both DIV2 and DIV3. This puts them side by side in both browsers.
However, DIV3 is appearing vertically centered relative to DIV2. I want the top of DIV3 to be in line with the top of DIV2. I have read about using position: absolute (on DIV3 in this case) to force it to the top, and position: relative on their container (DIV4) but I would also have to specify a left position for DIV3, and since the width of DIV2 varies, that would be a problem.
I haven't posted any code because I'm not really sure which parts would be useful to see, and the entire content of the DIVs along with their CSS would be pages of code (some of the DIVs are written dynamically with PHP/MYSQL). Hopefully my description of the situation will be adequate.
Here's an image of how I want it to look: http://i46.tinypic.com/qstks1.gif
Once again, I think the main problem I am having with standard solutions of using floats or absolute positioning is that every DIV is variable in height and width. I almost have this solved with inline-blocks, except for the vertical positioning of DIV3 relative to DIV2.
EDIT: Per request, I put up some code on JSFiddle. However, the displayed result isn't at all like how it actually looks, which I knew would be the case. This code is included into another php file, which itself is included into the index.php. Most of the php variables are set in the index.php according to standard MVC practices. So it doesn't really work at all without access to all those other files, not to mention the MySQL database that it obtains the image filename from (and which it uses to determine the height and width of the image). http://jsfiddle.net/Technetium/GKUgY/
It won't let me submit this without putting code in-line for some reason (do they really want me to put that whole thing here?), so here's some bogus code just to let me edit the post... ignore this. $sense=false;
This is the entire imageviewer.php file, and the entire CSS file. In the original post I was simplifying the DIV names, so use this key: DIV1 = imageviewer (it's created in an echo statement, so you won't find it under the usual DIV tag color), DIV2 = black_frame, DIV3 = right_of_image, and DIV4 = image_plus_prints. The stuff at the bottom is all in a DIV of its own called simply below_image.

Answer 1

You might want to have a look at Matthew's 3 column liquid layout, might well be up your street; as other posters have pointed out we can't fix the problem if you don't post your code.
http://matthewjamestaylor.com/blog/perfect-3-column.htm

Answer 2

I made a JSFiddle that I think should work for your situation.
(nevermind. The DIV2 and DIV3 do not stay side-by-side if the window is repositioned.. yet.. I'm trying to work on that now. I think it has to do with how the DIV1 has no size set, so it resizes itself, which makes the other divs move around)
I used an additional div inside of DIV4 called DIV5 and set clear:both so it would fall below both of DIV2 and DIV3.
Also, read through this example of CSS positioning http://www.barelyfitz.com/screencast/html-training/css/positioning/

Answer 3

Try using static position with display inline/inline-block/block instead float. Reset basic tags - html and body - to clear browser defaults and include height:100%, so you can set height for it`s childs.
Tip: You can use inline-block with vertical-align.
Ex:
html, body{margin:0; padding:0; width:100%; height:100%; background:#eee;}
div{margin:0; padding:0; }
#div1{ margin:0 auto 0 auto; width:90%; height:100%; background:#fff; top:0; bottom:0; display:block; padding:10px 0; }
#div4{width:90%; height:80%; display:block; background:#eee; margin:0 auto 0 auto; padding:10px 0;}
#div2{ width:66%; margin-right:3%; height:auto; display:inline-block; border:#aeaeae solid 1px;}
#div3{ width:30%; height:auto; display:inline-block; border:#aeaeae solid 1px;}
<div id="div1"><!--full container -->
<div id="div4"> <!--principal -->
<h1>Content</h1>
<p>
Left floating and relative position are trouble. Use display:inline/inline-block/block instead.
</p>
<div id="div2"><!--content --> middle </div>
<div id="div3"> <!--right side--> aside </div>
</div>
other content
</div><!--close all -->