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

[nixnerd]

Everytime I use a wrapper, I find that all elements are either in or out. It’s kind of hard to wrap some elements and not others.

Take a look at this site:

http://mfglabs.com/

See how the photo is outside the wrapper and the logo and nav are inside? I know what you’re thinking:

Just add a background photo!

If you scroll, you’ll see that “background photo” is controlled by a JS scrolling plugin. It is not fixed, it just scrolls at a slower rate than the rest of the page.

In order to do that, the photo has to have it’s own class/id.

Here’s the question:

What is the BEST way to contain SOME elements in a wrapper but not all?

The easiest way is to just give some elements a margin-left or margin-right. But… that seems kinda dirty.

[Alen]

Everytime I use a wrapper, I find that all elements are either in or out. It’s kind of hard to wrap some elements and not others.

I’m really not following. If you have elements that need to be outside the wrapper. Let them be outside.

What is the BEST way to contain SOME elements in a wrapper but not all?

position : absolute;

[chrisburton]

@joe_temp

Besides, setting it to position: absolute; won’t work if the wrapper is set to position: relative;.

How do you figure? If you have it set to position: absolute; it can be anywhere on the page using top, left, right or bottom positive or negative values .

By the way, love the rollovers.

[chrisburton]

Yes, using 0 values. But using negative or positive values you can put it anywhere as I stated.

http://codepen.io/chrisburton/pen/oqJpx
http://codepen.io/chrisburton/pen/iapyK

[Alen]

But for clean markup, I want to keep it inside of its section.

Clean markup would be to keep it outside the section, if it belong there.

[Alen]

Are you talking about sectioning content with HTML5 (article, section, nav)? or are we talking about generic wrappers (div)?

[chrisburton]

Like this?

http://codepen.io/chrisburton/full/iapyK

I’m horrible at CSS (I hate it) so forgive me.

Or this: http://blussh.com.au/about/

[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.

[Author]

Posts