How can I prevent a user from making the browser window narrower than a predefined width in HTML and CSS?

Question

I would like to know how I can prevent a user from making the browser window containing my webpage narrower than a predefined width, since the minimum width of the browser window that Firefox automatically defines will break my layout. How can I do so? Thanks!

Answer 1

This is an example with boxes next to each other which are broken because of a to small screen size. So they appear below each other instead of all next to each other.

div {
  height: 100px;
  width: 100px;
  border: 2px solid black;
  padding: 5px;
  float: left;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

By simply adding body { min-width: 1200px; overflow: auto/scroll; } we define a minimum width for the website. That way now all boxes appear in one line. If the users browser is smaller than 1200px, they will get a horizontal scrollbar.

body {
  min-width: 1200px;
  overflow-x: auto;
}

div {
  height: 100px;
  width: 100px;
  border: 2px solid black;
  padding: 5px;
  float: left;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

However using this method or what you try means a lack of skill and a low quality website as it is non-responsive. A good web developer will change the design with media queries to prevent an overflow or a min-width higher then 320px (smallest mobile screen width).