If you're looking for the final code, it can be found here: http://jsfiddle.net/asaxdq6p/6/
I am attempting to create an effect similar to this image:
To achieve this, I am using the Equal Height Columns with Cross-Browser CSS trick as described in this article.
My challenge is to accomplish this without relying on JavaScript (for sidebar width) or CSS3 (calc). The website I'm building is primarily for older individuals and needs to function properly even without JS, which is common among elderly users in Poland.
Additionally, the structure of the layout must be logical and displayed correctly in text-only browsers.
The question is, is this possible?
The maximum page width is 1400px, centered with margin auto.
The first column is the sidebar, occupying 28.5% of the page width (400px at 1400px width), but its width is not fixed (usually between 300-400px for responsiveness).
The second column is the content area, taking up 71.5% of the page width (up to 1000px).
What do I want?
I want the background to start after the sidebar, ensuring it's always more than 50% of the body plus the difference between the center of the page and the end of the sidebar.
The starting position must align perfectly due to the Equal Height Columns requirement (to prevent covering the sidebar's background).
After that, overflow is acceptable.
The issue lies in the variable distance between the center of the page and the end of the sidebar. Setting it statically to 300px (700px - 400px) breaks when the page width is less than 1400px.
Enough talk.
Here's a JSFiddle link illustrating my point (commented for clarity).
Alternatively, I could apply height: 100% with position: relative to have the sidebar slightly overlap the background by setting the body's background color to match the sidebar.
But I'm unsure if that's the best solution.
Any advice or suggestions are greatly appreciated! Thank you in advance.