Grow your CSS skills. Land your dream job.

Background element full width within restricted element

  • # March 28, 2013 at 3:31 pm

    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

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

    # March 28, 2013 at 3:52 pm

    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

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

    # March 28, 2013 at 4:37 pm

    You 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

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

    # March 28, 2013 at 6:09 pm

    >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

    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

    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;
    }

    # March 29, 2013 at 3:41 pm

    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;

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".