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!
No. You’ll need to use a separate wrap outside of your main wrapper.
So I will have to have this element _outside_ the `container_12` element? Makes sense, but I was hoping there may be a workaround.
you could absolutely position the child to be wider than parent.
You could also potentially do it using a negative margin. Example:
Absolute positioning would be great too.
that assumes the browser width is 980… he stated entire width of browser window
>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.
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?
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!
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.
margin: 0 auto;
margin: 0 auto;
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;
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".