layout - Shrink Or Expand Margins With Window Resize -

here's code i've been fiddling with: http://jsfiddle.net/denwg/3/

first, you'll need expand right column contains html , css. notice how grey container expands , contracts 90% of available width.

#container {     width: 90%;      margin: 16px auto;     /* more rules... */ } 

ideally, want green box start on right wall of container. window shrinks, pushes right border closer left border. want green box have behavior. window shrinks, want right border push green box towards red box.

both boxes display: inline-block;.

initially, thought of adding margin-right: some%; red box, didn't work thought would.

eventually, wanted have grid of red , green boxes. approaching correctly? advice? million!

i changed following css:

    #container {         width: 90%;         margin: 16px auto;         padding: 16px;         position:relative;  /* added */         border: solid 1px #333;         background-color: #eee;         min-width: 280px;     }      #greenbox {         width: 128px;         height: 128px;         position:absolute;  /* added */         top:16px;         right:16px;         background-color: green;     } 

working fiddle