jquery - Should I use CSS, javascript or both to make this fixed element expand the parent element? -

i know element position:fixed acts parent element position:relative (or no position specified) doesn't exist, , that's concern. i've seen same question being asked here on stackoverflow, not same problem.

i have wrapper, element relative position, , element fixed position inside relative element. element fixed position should expand element relative position scroll page, what's happening when scroll page, element fixed position go out of main container, instead of expanding. how can make main element push container element bellow, instead of getting offset?

fiddle

http://jsfiddle.net/t2pl5/515/

here code:

css

body {     background: #ccc; }  .wrapper {     margin: 0 auto;     height: 600px;     width: 650px;     background: green; }  .sidebar {     background-color: #ddd;     float: left;     width: 300px;     height: 350px;     position: relative; }  .main {     background-color: yellow;     width: 200px;     height: 100px;     position: fixed;     margin: auto; } 

html

<div class="wrapper">wrapper     <div class="sidebar"> sidebar         <div class="main">main</div>         </div>     </div>