I am looking to extend the background color or image to mimic the appearance of the example at the bottom in
Same code but showcased here: Example1:
<div class="fixed_width">
<div class="header">Header</div>
<div class="menu">
Here be some menu
</div>
<div class="content">
Here be some content<br/>
And even more
</div>
</div>
Example 2
<div class="fixed_width">
<div class="header">Another<br/>Header</div>
<div class="menu2">
Here be some menu
</div>
<div class="content">
Here be some content<br/>
And even more
</div>
CSS:
body {background: lightgray}
.fixed_width {width: 500px; border: solid thin black;
margin: 20px auto; background: white;}
.menu {background: blue; color: white; padding: 20px;
margin-bottom: 10px;}
.content {background: white; border: solid thin gray;
margin: 5px;}
.menu2 {width: 500px; background: blue; color: white;
margin-bottom: 10px;padding: 20px 2000px 20px 2000px;
margin-left: -2000px;}
The bottom example I created causes a scrolling issue when the browser tries to navigate to the 2000px on the right side.
The page structure resembles the code in the jsfiddle link, with an unpredictable position for the top of the menu due to variable header height (making it impossible to use a pre-made full-page background image).
Disabling scrolling is not an option because it would hinder user experience on smaller screens. Any suggestions on how to resolve this issue are greatly appreciated.