Resizing Image and Div with Window

[mickkmg]

Hi all

here to pick your brain again :)

I'm trying to get a div containing menu navigation and text to stick to an image container that will resize when window is resized... i mean, on load or at startup image width, the div will have about 20px margin from it. and what i want to do, when the window is resized, image will get resized, but my text box won't stay within the 20px of the image width... if you know what i mean.

I have this code for the window resize function:



function resize_elements() {

var w, h, conwidth, conheight, imgheight, imgwidth, top, left;
w = $(window).width();
h = $(window).height();
conwidth = w - 260;
if(conwidth < 493){ conwidth = 493; }
conheight = h - 95;
conratio = conwidth/conheight;
imgwidth = 925;
imgheight = 648;
imgratio = 925/648;
if(conratio < imgratio){
width = conwidth;
height = conwidth / imgratio;
} else {
height = conheight;
width = conheight * imgratio;
}
if(width > imgwidth || height > imgheight){
width = imgwidth;
height = imgheight;
}

top = (h/2) - (height/2);
left = (w/2) - (width/2);
if(left < 130){left = 130; }


$("#img-container img").css("width",width+"px");


Is there anything I can add to that set of code (rather keep the same structure than rewrite the whole thing) to make the text box sticks to its margin?

MANY THANKS!!! :D

Mick