使用jQuery将div放置在窗口的空白部分的中间

Question

In my template I have fixed div at the left of the main wrapper div , In the remaining portion I want to place my another div box perfectly in the middle even on window re-size.

I got the current window-size with jquery:

<script type=text/javascript>
$(window).resize(function() {
       var my_window = $(window).width();
});
</script>

Html:

<div id="wrapper">
<div id="rightbox"></div>
<div id="leftbox"> </div>
</div>

Css:

#wrapper{
position:absolute;
width:100%;
height:100%;
background:green;}

#leftbox{
position:fixed;
width:100px;
height:100%;
top:0;left:0;
background:red;}


#rightbox{
position:fixed;
width:400px;
height:100px;
bottom:100px;
left:50px;
background:blue;}

Demo : http://jsfiddle.net/NpeRZ/

Now I want to place rightbox div in the middle of the green screen for any screen-resolution, so I want flexible width for this rightbox div . How to get this using jquery to set rightbox always in the middle. As well according to jquery my_window value I want to set different margin-left and margin-right for rightbox div.

for my-window 1024px :margin-left = 100px,
for my-window 768px  :margin-left = 80px.
for my-window 640px  :margin-left = 60px.
for my-window 480px  :margin-left = 40px.
for my-window 240px  :margin-left = 20px. 

Answer 1

try this:

#rightbox{
position:fixed;
width:400px;
height:100px;
left: 100px;
right: 0px;
top: 0px;
margin: auto;
bottom:0px;
background:blue;
}

The left would be the size of of the left frame or div.

Answer 2

You don't have to use Jquery, just change the css of the right box to:

#rightbox{
position:fixed;
width:400px;
height:100px;
left:50%;
margin-left:-150px;    
top:50%;
margin-top:-50px;
background:blue;}

Just tried it, works perfectly.