Persistant UI region for filtering section in layout

Question

I have to include a filtering column next to the results. The filtering column needs to be a persistent UI on the bigger screens (resizes the results content while it's open). I'm having quite a few issues however. First the entire site layout is using a 1200px grid for bigger screen sizes. This leads to extra spacing on the sides of the grid 120px each (this screen size is 1440px).

If I put a background color in the filtering section is it okay to extend it all the way to the end of the page breaking out of the 1200px grid?

Is this bad practice? Shouldn't the content inside of the filter section line up with the page title and breadcrumbs?

Answer 1

This is a page architecture problem -- the answers can be found by asking, "What does each item on the page belong to?"

The filter section belongs to the results section, not to the larger page. Thus it should line up with the results, and not extend into content areas below it.

The top elements, like the breadcrumb, belong to the larger page and don't need to be aligned with the search results.

Here's an example of how this could look.