Two divs 100% width only on the right

[jknetdesign]

Here’s a link to the design concept image.
http://heisingerrealestate.com/homepage.jpg

The designer would like the green nav and the white footer to extend past the wrapper. Any ideas?

http://heisingerrealestate.com/

[Paulie_D]

The designer would like the green nav and the white footer to extend past the wrapper. Any ideas?

Is the ‘grey’ area, the wrapper?

But yes, looks like an excellent place to use pseudo elements.

http://codepen.io/Paulie-D/pen/XJjpbp

[Paulie_D]

Hmm…except something isn’t working on the above in the ‘reduced view’ embed.

Works OK on desktop though.

Hmmm

Size of the shadow?

http://codepen.io/Paulie-D/pen/azmpGY

[jknetdesign]

Thank you Kwerty, but I applied your styles and no difference. I only need this effect on desktop. The wrapper is is just the main container within the body that has a max width of 1200px.

[Paulie_D]

And my version, with a pseudo element?

[jknetdesign]

I was out of town for he holidays. Paulie, what’s the first step towards applying your pseudo? Kwerty, here’s the link to the site where I applied your CSS http://heisingerrealestate.com

[Paulie_D]

Well the code is here

http://codepen.io/Paulie-D/pen/XJjpbp

Identify the element that’s going to have this ‘overlap’…give it position:relative if it doesn’t have it already and then use the the pseudo element as I demo’d above. swapping out your IDs or classes as required.

[jknetdesign]

Now I see how the drop shadow works. Are you saying I don’t need this entire rule set? #navigation ul.nav:after

The box shadow property is set to 50px 0 0 0 #75aa42
How do I allow for a 100% width? I tried 999px in Firebug but when it’s applied in the CSS it’s not the same result.

[Author]

Posts