Reply To: How do I keep SOME elements in the wrapper but not all?

[MattF]

I think I get what you are wanting.

So you are saying, I think, you have a wrapper that is let’s say 980px wide. You then have your content organized inside there. Let’s say you have 2 paragraphs but then you want to add an image after the paragraphs that goes 100% (full screen wide) and then more paragraphs after but you want them all to be contained in the 1 wrapper.

Using position absolute won’t help because it is taking on the dimensions of the wrapper and if you didn’t have it relative, then that positioning absolute wouldn’t really know how long your paragraphs are to where you exactly want it. Especially being responsive.

So since the wrapper is only 980px, how can you add another element that will flow with the content but 100% of the screen without absolute positioning.

If that makes sense? That is what I am gathering you want to do.

As for an answer, I don’t know of a way you can. I would just use multiple divs with 100% width. Or for your example do something where your main dive to hold the image and nave is 100% then create a div for the wrapper for the nav and do a z-index of 10 and then close that wrapper and create one for the image for 100% with a z-index of 1 and maybe add a margin-top of a negative percentage or pixel so the image will still be at the top of the page and behind the nav.

Sorry for the long post but hope it helps or makes sense.