How to implement 2 different grid structures in one section?

So I am trying to mimic the header-graphic navigation from this site: http://wpengine.com/

It seems that they are not applying any grid on the header-graphic area, but having them separated as 2 divs. In their Hero block (container) area. I am looking to recreate the giant content area (fluid content box with 5 navigation buttons). Please try to stretch the right side of browser, the main navigation boxes stays at the same position and the left area (content) extend its as fluid. I am trying to create that appearance.

``` /* For content navigation area */ .gwc_slide_buttons { width: 375px; height: 556px; right: 0; position: absolute; }

/* For content area */ .gwc_slider { left: 0; right: 375px; height: 556px; position: absolute; overflow: hidden; } '''

What i am having in my stylesheet:

''' /* For content area */ .slider_content { position: absolute; }

/* For the content navigation area */ .slider_content_navi { width: 430px; position: relative; } ```

As you can see here, I tried both absolute positioning for my content and navigation button, but it is not working as it should be compare to the code I have inspected.

Does anyone have any suggestion?

Here is the preview on jsfiddle:

[http://jsfiddle.net/lee61013/CeLDk/2/]