When you have div width 100% it apply to browser viewpoint only not the max page width. This can be a problem when you have another div with a fixed width length. The fix is to put a min-width with max possible page width.
<html>
<head>
<style>
html, body{margin:0; padding:0;border: 0;outline: 0;}
</style>
</head>
<body>
<!--The problem-->
<div style="margin:0; width:100%; background-color:#060;">
Header 1
</div>
<div style="margin:0 auto; width:1000px; background-color:#03C;">
Text Line 1
</div>
<br /><br />
<!--Fix-->
<div style="margin:0; width:100%; min-width:1000px; background-color:#060;">
Header 2
</div>
<div style="margin:0 auto; width:1000px; background-color:#03C;">
Text Line 2
</div>
</body>
</html>
Don't forget padding widths when calculating min width.
No comments:
Post a Comment