[Solved] How to implement 2 different grid structures in one section?

[lee61013]

Hi there,

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_eblock (container) area.

/* 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; 
 }

I tried relative for my navigation, but it is not working at all…

Does anyone have any suggestion?

Here is my code on jsfiddle:
http://jsfiddle.net/lee61013/CeLDk/2/

[lee61013]

Thanks for the suggestion, I found that I didn’t not set my left and right position value to be 0. Which it was causing 2 divs are not align with the edge of browser correctly.

[Author]

Posts