How 2 set negative sidebar's top-margin,responsive to main content's height?

Hello,

I created a custom page template with two sidebars to my child theme, and worked out that adding negative margin-top to sidebars pulls them up from underneath the main content.

I was wondering if anyone could help me out and tell me if there’s a way to set a negative margin responsive to the height of the main content which varies?

site:
http://51stokescroft.com.gridhosted.co.uk/bar/

css:

#middlecontent {
  	float: left;
    margin: 0 25% 0 25%;
    width: 50%;
}
#secondary {
    float: right;
    margin-right: 5%;
    margin-left: 75%;
  	margin-top: -40%;
    width: 20%;
}
#extra-sidebar{
    float: left;
    width: 20%;
    margin-left: 5%;
  	margin-right: 75%;
  	margin-top: -40%;
  	border: 1px solid #7d7570

}

I tried wrapping main content & sidebars, setting

#wrapper {
position: relative;
}

#secondary {
 position: absolute ;
 top: 0;
}

#extra-sidebar {
 position: absolute ;
 top: 0;
}

But setting the wrapper to position:absolute; overrides the absolute position of the container which holds the footer down..

I also tried adding a background image to the wrapper, thinking if content extends, sidebars will do as well, but that gets rid of the sidebars completely..

Would really appreciate your help! 🙂

Thanks!
Dom