Unofficial CSS challenge: breaking the box to the edge of the viewport in a two-column layout

almost 5 years ago from , I design and build stuff. I write.

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.



  • Ryan MackRyan Mack, almost 5 years ago (edited almost 5 years ago )

    Here's one way: CodePen

    8 points
  • Tom HareTom Hare, almost 5 years ago (edited almost 5 years ago )

    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.

    2 points
    • Nick Heer, almost 5 years ago

      I'm hoping to be able to put content across the width of the box-breaking element; specifically, an image.

      0 points
  • Nick Heer, almost 5 years ago

    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.

    1 point
  • Adrien Maston, almost 5 years ago

    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.

    0 points
  • Andrew Parker, almost 5 years ago

    Another approach with padding / margin:


    0 points
  • Patrick HillPatrick Hill, almost 5 years ago (edited almost 5 years ago )

    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.

    0 points
  • jeremy silverjeremy silver, almost 5 years ago


    You'd do this with absolute positioning. I made an example for you.

    0 points
  • Nick Heer, almost 5 years ago

    Sorry about the ill-formatted image. DN doesn't have preview or edit.

    0 points