Move child DIV outside parent DIV

Question

I will go straight to the point. I have a child div that has width of 100% and it is located under wrapper that has a fixed width.I was wondering how can i make the child div "break out" and have 100% full screen page width. Code goes like this, i tried playing with relative/absolute positioning but no luck.

<div class="wrapper">
  ...Some other code...
    <div class="banners">
        <div class="first"><img src="http://placehold.it/200x200"></div>
        <div class="second"><img src="http://placehold.it/200x200"></div>
    </div>
   ...Some other code...
</div>

Fiddle can be found here http://jsfiddle.net/qMYQw/

Beside "banners" div, there are few more sections both above and bellow that div, thats the reason it "banners" are in wrapper

P.S There are other sections above/bellow the banner DIV, so simply setting up the position:absolute doesnt do the trick

Answer 1

Fiddle

.banners img {  
    width:100%;
}

.banners .first, .banners .second {
    float:left;
    width:50%;
    position: absolute;
    left:0;
    border:1px solid blue;
}

.banners .second {
    margin-left: 50%;
}