Make child DIV larger than parent DIV with jQuery

Make child DIV larger than parent DIV with jQuery

Hi,

This has been a discussion that I have found all over the web with no solutions yet, but I refuse to believe that its impossible, especially with using a bit of jquery magic :)

The problem:
I want to make the Child Div of a fix width Parent 100% width, like so:
enter image description here
I know that with CSS this is partially achievable:

  1. .child-div{
  2. position: absolute;
  3. left: 0;
  4. right: 0;
  5. }
  6. .parent-div{
  7. position: static;
  8. max-width: 900px;
  9. }

But the issue I'm having is that I can't actually change the position: static; prooperty of the parent because I am working within a CMS which means I can't tailor the HTML to open and close the wrapper.

The other problem is that by using this method, all the content underneath the Child shows up behind the .child-div, it doesnt sit underneath, I understand that this because by making it absolute it no longer sits in the flow of content.

I understand why this wont work, but there must be a solution somehow with Jquery?

Please help?