Liquid Layout Background Problem

[OldHonky]

I'm trying to make something  that has a fluid design with a background comprising 3 images - a background 2px wide slice on the body - and  right hand and left hand images floated in divs within the body.  Then all the content will be inside an absolutely positioned div 100% wide and 100% high bought to the top using z-index.

This works perfectly except when I resize the window to 800 x 600 the right hand side image is cut off slightly.  I've tried changing div widths - using percentage widths on one or both divs, and floating both divs left, nothing seems to work.

Can anyone tell me what I'm doing wrong?

The page is here  http://www.test-area1.doncaz.co.uk/

[Fallen Angel]

Have you got a screenshot of what it's doing/not doing? It's looking fine to me when I resize to 800x600.

[OldHonky]

Both sides should look the same

[Fallen Angel]

Very odd. I'm baffled. It's symmetrical when I re-size to 800x600 - and in Opera and IE too...

Everything looks to be in order in the code, but I can't check out whether any changes to the CSS make any difference because it's showing up fine as it is for me. The only thing I could think of that could possibly influence it would be the 100% height you've got on the html and body, but as your images are the same width and height, if they were going to get stretched or squished, it'd be in the same proportions, so it can't be that.

The only thing I have noticed is that when I highlighted the block level elements using the FF web dev toolbar, the right hand image div is 300px while the image itself is 250px, whereas the left hand image div and image are both 250px. Does it make any difference if you make that right hand image div 250px wide?

If not, I'm stumped. 

[PrawnDog]

I can't replicate the problem with FF, IE and Opera either.

However, looking at your image I wonder if it's an FF problem? The tab for your selected page almost appears off the page - I wonder if somehow FF is pushing both the tab bar tab and the page outside the display port (excuse my DIY terminology). I've never seen it happen, but that's the impression I get from your image. Maybe a silly question, but do you get the same problem with fewer tabs (or duplicate to new window).

[Caz]

I get the same problem opening in a new window rather than a new tab but your measurements sound interesting FA, I didn't think to measure on screen just accepted what he was yelling at me.( Because I couldn't put it right  )

[Fallen Angel]

I spotted it first because I'd highlighted block level elements using the FF web dev toolbar and one just *looked* wider, so I got MeasureIt on the job.

[OldHonky]

It was deliberate, and it makes no difference.  I thought if the last 50px disappear off-page then why not make the right floated div 50px wider.  It made no difference so I left it as is.

It is only a problem on FF,  IE and Opera are OK, I get the same problem with FF on my machine at work.  I can probably live with it but I would really like to know why it's happening.

[PrawnDog]

I can replicate your problem on a local copy, but only under quite tenuous circumstances.

Have you tried removing the height/min-height declarations? This should remove the vertical scrollbar, which you don't seem to have (which may be part of the problem).