[Solved] Extending div background-color to fill gutter

[captainill]

I’ve seen a hack on the web where you take a layout that’s split like in this picture: http://dl.dropboxusercontent.com/u/2756425/screenshot-1.png

And extend the background-color to fill the page gutter. In my example (in the image at the url above) I would like to extend the white background to fill the page to the right instead of having the light purple body color.

The solution may have use the ::before or ::after pseudo selectors.
I think this should be clear enough if you’ve seen the solution. I can’t seem to locate googling.

Thanks!

[Alen]

You would set the background on the body to white, then left sidebar background to gray, that should solve the problem.

[captainill]

Well the purple also needs to extend out beyond to the left into the gutter and since the sidebar is always shorter then the content area I chose to use purple for the body so I don’t have to use javascript to set the height of the sidebar to match the content or change the page structure at all.

[captainill]

Also I should note I’m open to using images, as I know there is a solution out there with them but what I’ve seen used doesn’t use images so I think it was psuedo elements with a bg color set.

[captainill]

Ok I found what I was looking for and actually on css-tricks.

https://css-tricks.com/full-browser-width-bars/

There are updates to the post. Im not sure which is best but I am using the pseudo elements.

[captainill]

Without getting into the html structure I’ll add that the initial solution did not work in firefox. The browser width expanded in consequence to the width of the absolutely positioned content in the :before pseudo selector.

I went with boxshadow which is ‘update #2’ in the posting I linked to.

my css:

::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -9999px;
    right: 0;
    box-shadow: 9999px 0 0 white;
}

[Author]

Posts