I know, this help section is for construct. But with a whole bunch of people claiming they know their css and stuff. I figured I'd try my luck with this question here too (I've been posting it elsewhere in the hope someone on the net knows how to get it working). Normally have no trouble with stylesheets, but it seems doing what I'm wanting to do is not as simple as I'd hoped. I hate asking for help so obviously I've tried everything I know before asking at all.
Ok here's the thing, I've tried everything I know and hunted the net trying to find an answer, and just when I think I have, another issue crops up. Sorry about the title but I just don't know what to call what it is I'm trying to do. But it SHOULD be possible, and it SHOULD be really simple, which is frustrating the heck out of me because I cannot get this to work!
Here is what I'm trying to do, complete with a picture to help visualize things.
Example
This shows how I want my site layout to appear. A regular width site so it can be displayed on low res desktops, BUT with extra artwork on the left and right, complete with a couple of flash animations to the sides.
<img src="http://img708.imageshack.us/img708/2458/layoutstyle.jpg">
The red outline shows a typical 800x600 display, as you can see, they should only be able to see what's in the center of the page.
The dark blue outline shows a much higher resolution display
The light blue color shows the extra artwork only revealed to higher resolutions
The flash boxes contain flash elements which should remain fixed in those locations regardless of the resolution the user is using (they'd be setup to match the background image, so must not move)
The dark blue outline shows how the same site would look on a much higher resolution. Instead of black space to the left or right, or the actual site stretching to fit (not looking for a liquid layout in this case), they get to see the rest of the artwork, plus the flash elements.
The purpose of this is so it will look fine on low resolution displays, but also, when viewed on higher resolution displays, will then show the extra artwork instead of blackness.
Problems
Just when it looks like it might work, I find that each browser displays things incorrectly, pixels, picas, ems, etc. and so on. How do I get it to work across the board? I don't want to be unprofessional and do the "This site should only be viewed in X browser".
The flash enabled parts always wrap and refuse to appear off screen, how do I fix this? When I place them, I want them to stay exactly where they are (which is offscreen on a low resolution, but visible on a higher resolution), not bunch up and move out of place.
I can get the actual background to appear correctly, so when resizing the browser, it remains fixed in the center and reveals the rest of the artwork both left and right. But other elements simply refuse to behave correctly (see first problem, this happens especially with browsers not rendering the same things the same, such as pixels etc. being done differently in each browser).
If you want a real world example of what I'm trying to achieve, please view the following website:
Diablo III Website
Unfortunately I have no idea what language they used and it looks unreadable to me, so borrowing from view source isn't an option for me in this case (I use Dreamweaver, css and php, and have no understanding of xml or whatever it is they're using, neither do I have the time to learn another language) This should be possible with css, I see no reason why it shouldn't be. But I'll be damned if I can work out what's not going right.
Is there anyone who can help me here, cause this is REALLY frustrating me now, it should be incredibly simple but it's not, and I feel as if I'm being forced to abandon everyone who doesn't have X display and X browser. Which I don't want to do.