100% Width Non-responsive Html Layout Collapse When Window Resize
How to avoid 100% width non-responsive HTML layout collapse when window resize? I tried by removing viewport meta tag but not working..
Solution 1:
just give your body or a container div a set width or min width
<body><divstyle="min-width:1024px;" >
//put the rest of your html in here
</div></body>Solution 2:
Assign a width or max-width in your CSS. For example:
<body><divid="myContent">Stuff</div></body>then in your CSS:
#myContent {
margin:0 auto;
max-width:1024px;
}
The margin property will apply a top and bottom margin of 0, then automatically center the div with auto. If the browser screen is wider than 1024px, the webpage will not get any larger but will sit in the center of the browser. If it is below 2014, the width will stick to 100% and the content will wrap to fit on the screen.
If your site needs to work in IE6, be sure to specify width instead of max-width, as IE6 doesn't recognise max-width and will just ignore it altogether. You can place this either in an IE-only stylesheet.
Post a Comment for "100% Width Non-responsive Html Layout Collapse When Window Resize"