html - Aligning opposite edges of divs-2 -

i want green box lie immediate bottom left red header always, if user zooms in , out web page.

demo: http://jsfiddle.net/bvqcx/

now, want margin-left property given green box. or red box @ center. can provide me jsfiddle solution? solution must div based layout.

similar question: aligning opposite edges of divs

                         |red box|                |green box| 

place green box inside red box div, make position: absolute. shift left width of green box:

html:

<div class="header">this header.     <div class="leftsection">this left section</div> </div> 

css:

.header {     margin:0px auto;     width:100px; } .leftsection {     position: absolute;     width: 100px;     left: -100px; } 

fiddle: http://jsfiddle.net/bvqcx/1/