I understand that I can save these styles in a CSS file for later, but for now, could you assist me in ensuring that a scrollbar appears when there is content (in red) within the center section with a fixed or variable width? It seems that in some cases, despite the User's screen being smaller than the content, a scrollbar fails to appear.
<html>
<body>
<div id="header" style="background: #555;margin: 0px; padding 0px; position: fixed; top: 0px; left: 0px; width: 100%;min-width: 900px; height: 50px;overflow: auto;">
</div>
<div id="menu" style="background: #444;margin: 0px; padding 0px; position: fixed; top: 50px; left: 0px; width: 200px; height: 100%;overflow: auto;">
</div>
<div id="center" style="background: #666;margin: 0px; padding 0px; position: fixed; top: 50px; left: 200px; width: 100%;min-width: 900px; height: 500px;overflow: auto;">
<div style="width: 600px; height: 300px; background: red;overflow: auto;">
</div>
</div>
<div id="footer" style="background: #777;margin: 0px; padding 0px; position: fixed; bottom: 0px; right: 0px; width: 100%;min-width: 900px; height: 50px;overflow: auto;">
</div>
</body>
</html>