I am looking for a specific layout that consists of three columns: left, content, and right.
The left and right columns will each have an image, with the left column image aligning to the left edge of the browser and the right column image aligning to the right edge, ensuring that they stay in position even when the browser is resized.
The content/centre column needs to have a fixed width of 960px and remain centered in the middle of the screen.
When the browser width is resized, the content should stay centered while the left and right columns do not overlap it but stay on their respective sides.
I have made several attempts but have not been successful so far. Any assistance would be greatly appreciated.
Thank you.
UPDATE:
As requested, I have included a jsfiddle link to show what I have tried:
I have almost achieved the desired layout, with the content remaining centered and the right column aligning to the right. However, I would prefer if both the content and the panels remained centered.
Currently, when scaled down, the left column and part of the content are visible. I would like the content to be fully visible and centered in the window, with the left column pushed off to the left of the screen. I hope this link provides some clarity.
Additional information: The side columns should have a minimum width of 280, the content section should be 960px wide, making the outer container a minimum of 1520px wide.