How to avoid 100% width non-responsive HTML layout collapse when window resize? I tried by removing viewport meta tag but not working..
Asked
Active
Viewed 2,517 times
0
-
Share your code or replicate the issue in jsfiddle – Krish Jun 06 '14 at 04:39
-
So you would like your `div` to not resize? I'm just a little confused. – lindsay Jun 06 '14 at 04:39
-
my concern is to avoid the collapsing of 100% width layout when window resize...how can i share code – SurajBalakrishnan Jun 06 '14 at 04:41
-
Go to [**this**](http://jsfiddle.net) website, hit save once you've pasted your code in and add the link to your question. – lindsay Jun 06 '14 at 04:51
2 Answers
1
just give your body or a container div a set width or min width
<body>
<div style="min-width:1024px;" >
//put the rest of your html in here
</div>
</body>
Chimeara
- 695
- 7
- 27
1
Assign a width or max-width in your CSS. For example:
<body>
<div id="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.
Timmah
- 1,283
- 2
- 10
- 26