- This topic is empty.
March 28, 2013 at 3:31 pm #43741
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!March 28, 2013 at 3:39 pm #130063TheDocMember
No. You’ll need to use a separate wrap outside of your main wrapper.March 28, 2013 at 3:52 pm #130060
So I will have to have this element _outside_ the `container_12` element? Makes sense, but I was hoping there may be a workaround.March 28, 2013 at 4:18 pm #130067
you could absolutely position the child to be wider than parent.March 28, 2013 at 4:37 pm #130068DheerMember
You could also potentially do it using a negative margin. Example:
Absolute positioning would be great too.March 28, 2013 at 4:52 pm #130070
that assumes the browser width is 980… he stated entire width of browser windowMarch 28, 2013 at 6:09 pm #130077Paulie_DMember
>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?March 29, 2013 at 11:01 am #126415
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!March 29, 2013 at 11:15 am #126262
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;
}March 29, 2013 at 3:41 pm #130157
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;
- The forum ‘CSS’ is closed to new topics and replies.