Thursday, February 13, 2014

div losing background color/image when resizing the browser window

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