Restrict Resizing and Scaling in Webpage on Desktop

Question

I have an HTML/PHP/JavaScript document and I am having trouble with the sizing and scaling part of it. I want everything to act as Stack Overlow's website acts. So that whenever I resize my browser, everything stays in the same place and does not move around and change its format.

What can I add to my code in order to accomplish this?

Answer 1

Simple, set a width on your site's container element. Whether you do this for a single element or multiple will depend on the design and requirements of your site.

Examples:

Single Container

header,
footer {
  min-height: 150px;
}
main {
  min-height: 400px;
  background-color: #eee;
}
.container {
  margin: 0 auto;
  width: 1060px;
}

<div class="container">
  <header>
    Header
  </header>
  <main>
    Content
  </main>
  <footer>
    Footer
  </footer>
</div>

Multiple Containers

header,
main,
footer {
  margin: 0 auto;
  width: 1060px;
  min-height: 150px;
}
main {
  min-height: 400px;
  background-color: #eee;
}

<header>
  Header
</header>
<main>
  Content
</main>
<footer>
  Footer
</footer>