I want to make this one div break the box. I've got this one central div with a main content area (pink) and a sidebar (yellow). I want to slap a div in there (green) that's anchored to the righthand side of the main column, and expands leftward to go to the edge of the viewport. Something tells me this is possible, but I can't figure it out. CSS-only solutions please.
Here's one way: CodePen
High five for using
Assuming that the content in the green area should stay within the container: http://jsfiddle.net/nckwnfnq/1/
Edit: To provide a little additional info, with this method, the green div goes into the content flow of the pink container and the extended bit to the left edge is handled with a pseudo element.
I'm hoping to be able to put content across the width of the box-breaking element; specifically, an image.
Thanks to Tom, Jeremy and Josh for their attempts at this, which helped set me on the right track. I got close enough with a result that I'm happy — I'll be keeping an eye on this thread, though, just in case someone comes up with something better.
In short, I have a 100%-wide wrapping div in which I'm positioning the image absolutely on the lefthand side within a div that's 70vw. Then, there's a psuedo element in a parent div that draws overtop the image where the sidebar starts; because this psuedo element is created on the parent div, it's the same percentage width as the sidebar itself, so it always matches.
I'm not sharing code because it's not quite perfect. When it is, I'll update this. But it's good enough for now.
Just be a bit careful using vw units. There are some pretty major browser incompatibilities http://caniuse.com/#feat=viewport-units
Luckily, most of those are on older/outdated browsers - but if you have to support, a solid polyfill: https://github.com/rodneyrehm/viewport-units-buggyfill
Assuming you want the green box content to flow inside the main content, I would consider something like this :
Note that it breaks the centering of the whole layout but if tends to focus more on the main part (being the wider). There is room for some tweaking here to adjust the effect.
Another approach with padding / margin:
For these types of layouts I've decided the best approach for me is a fluid layout. I normally set my grid to 18 columns and only use the internal 16 for the majority of my content (offset of 1), leaving the first and last column to create the wide containing margins. When I have an element that needs to stretch to the edge and "break the box", I just don't set an offset.
This also means if content resides resides inside the div that is all the way on the edge, I can remove padding from the column, put an inner column and give it an offset of 1 allowing the content to line up properly and appear to be "in the container" with the rest of the page. I hope that makes sense
The only caveat to this is the final layout is fluid and not constrained, but in the responsive world we live in I think that's less and less of an issue.
You'd do this with absolute positioning. I made an example for you.
Thanks for trying, but this isn't anchored to the right edge of the main column.
I played with jeremy's concept a bit. It's not "anchored to the right edge." I just used the right margin to line it up.
I like where this is headed. Any way to make this work a little better if the container (.wrapper in yours) has a max width in px?
Sorry about the ill-formatted image. DN doesn't have preview or edit.