- This topic is empty.
-
AuthorPosts
-
March 28, 2013 at 3:31 pm #43741crowdisMember
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 #130063TheDocMemberNo. You’ll need to use a separate wrap outside of your main wrapper.
March 28, 2013 at 3:52 pm #130060crowdisMemberSo 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 #130067wolfcry911Participantyou could absolutely position the child to be wider than parent.
March 28, 2013 at 4:37 pm #130068DheerMemberYou could also potentially do it using a negative margin. Example:
width: 980px;
margin-left: -10px;Absolute positioning would be great too.
March 28, 2013 at 4:52 pm #130070wolfcry911Participantthat assumes the browser width is 980… he stated entire width of browser window
March 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.
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?
March 29, 2013 at 11:01 am #126415crowdisMemberThanks 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 #126262crowdisMemberI 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;
}March 29, 2013 at 3:41 pm #130157wolfcry911ParticipantI’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;
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.