I've been struggling to solve this issue on my own for quite some time now. It seems like a straightforward problem, but I just can't seem to figure it out.
The problem lies with two divs - one floating left and the other floating right. The right div has a margin-left of 40px, and its width should adjust as the window size changes. Currently, when the two divs touch, the layout breaks down.
If you'd like to take a closer look at the issue, please visit: https://jsfiddle.net/to7g54sn/1/
#contentwrapper {
width: 100%;
max-width: 1160px;
float: right;
margin-top: 154px;
margin-left: 40px;
}
#navigation {
width: 150px;
margin-left: -120px;
float: left;
}
(Please note that the preview requires a width of 1330px to view the divs before they drop down).
The constant application of margin-left: 40px on the right div is where the issue lies. As you scroll down on a resized window, you'll notice the left div overlaps. I suspect that the JavaScript code may be complicating matters, but I'm not entirely certain.