Question

I have below structure

<div class="mybox">
<div id="imageslide">
    <a href=""><img src="url" /></a>
</div>
</div>

It has fixed position and left:300px; means it will start from left side after 300px now I want to make mybox div width fill remaining space of the screen. So I can use 100% to #imageslide which is using some javascript to fits the image in to that div.

All in one I want to make either mybox or imageslide start from left after 300px and fits with the remaining width of the screen and image also should fit with the container accordingly.

Update:

The contain image has width and height 100% of parrent div #imageslide so I am unable to override with css. I can remove mybox div that has been additionally added to try with css.
I have tried css but doesn’t works.

This is the site url—————-
http://saltaa.com/

So here the home page big slider I wan to set is a way so it will starts after left menu column and image will fits according to the screen size in width and height.

It is really Strange.
Who help me to find the solution I don’t know why he/she has removed the answer and may be he voted negative to me. It is strange. At least he/she would allow me to check my file than would accept the answer.

Answer 1

try this:

.mybox {
   position: absolute;
   left: 30px;
}

var w = $(window).width() - 30;
$('.mybox').css("width", w)

http://jsfiddle.net/X5PPP/1/