Background element full width within restricted element

[crowdis]

Is it possible to have a background element within a parent element that has a defined width to span the entire width of a browser window?

For example, I’m building a site using the 960.gs grid structure, but I want the color behind my nav bar to extend beyond the edge of the grid. I appreciate the help!

[TheDoc]

No. You’ll need to use a separate wrap outside of your main wrapper.

[crowdis]

So I will have to have this element _outside_ the `container_12` element? Makes sense, but I was hoping there may be a workaround.

[wolfcry911]

you could absolutely position the child to be wider than parent.

[Dheer]

You could also potentially do it using a negative margin. Example:

width: 980px;
margin-left: -10px;

Absolute positioning would be great too.

[wolfcry911]

that assumes the browser width is 980… he stated entire width of browser window

[Paulie_D]

>You’ll need to use a separate wrap outside of your main wrapper.

You will need a top `container’ with a full width div underneath it.

Under that, you add another ‘container’.

Now, as I recall, the .container class is merely a width indicator so you can add **another** container inside your full width div and put the content in there.

So.

[div class=”container”]
Top Content
[/div]

[div class=”full-width”]
[div class=”container]
Middle Content
[/div]
[/div]

[div class=”container”]
Bottom Content
[/div]

That’s the way the 960gs works. You don’t **have** to have a single container if you don’t want to.

Does that make sense?

[crowdis]

Thanks for the responses! I ended up popping out of the “grid” for this section of the page and starting my main `container` after the header. So I do have a “top” container then a container for the main content below.

I appreciate the community on here. Cheers!

[crowdis]

I tried using `position: absolute;` to break the element out of the parent. I could get it to extend to the right, but I couldn’t pull it back to the left or center it in the window.

.testmain {
position: relative;
width: 960px;
margin: 0 auto;
}

.testsub {
position: absolute;
color: white;
width: 3000px;
margin: 0 auto;
}

[wolfcry911]

I’d remove the position: relative from the wrapper .testmain and position .testsub relative to the body. You can remove the width and use left: 0; and right: 0;

[Author]

Posts