I have always told my designer that he should ignore any web rules and think/design like the print designer he is. And it is my job to overcome the issues that arise because of this.
Every now-and-then an issue crops up that I think is solvable, but I'm not sure how best to approach it but I think it would be fun to try. See the below mock to understand the question.
This mock has a content area and a sidebar, but in part of the page there is a breakout image. I can make an image break out of the content by using negative margin. Here's a very simple example:
.full-width {
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
max-width: 100vw;
position: relative;
right: 50%;
width: 100vw;
}
The demo is here: https://codepen.io/Balloony/pen/ZPXdEg
Using this technique breaks the image out of the main container, but it does not break into the sidebar container, thus it simply goes over the top (or underneath).
Can anyone think of a way to solve this problem? I'm ok with using JavaScript or PHP or any other method.