Home/ Questions/Q 7033141
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T01:01:35+00:00

I want a webpage, with the content centered, and specify a minimum width so

  • 0

I want a webpage, with the content centered, and specify a minimum width so it resizes on small screens of smartphones, but still looks fine on PCs.

If I set the width of my div to 1024px, and margins auto, then the div stays centered when the browser window is stretched wider than that.

But obviously this requires the user to scroll sideways if they’re viewing the site on a small screen.

So I tried changing width to “min-width:480px” and the div does not stay centered in a large browser window.

I’ve done lots of googling and the blog/forum posts for this very topic claim that all you have to do is set min-width and auto margins.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>Test</title>
    <style type="text/css">
    *
    {
      padding:0;
      margin:0;
    }
    #content
    {
      margin: 0px auto;
      min-width: 480px;
      background:#BBB;
      height:800px;
    }
    </style>
  </head>
  <body>
    <div id="content">
      <span>content</span>
    </div>
  </body>
</html>

At this stage I’m only testing in Chrome.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    min-width will kick in as the div is told to be smaller than the min-width value. If you set the width of the div to be width: 1024px;, then it will always be 1024px. However, if you set it to a percentage value (ie. 100%, 93.75%, etc), it will scale down, and the min-width value will kick in once 100% < min-width. So set the width of the div to be a percentage value, and you should be good to go.

    Also, I’m not a huge fan of wrapping all of my content in a single, all-encompassing content div. Maybe I’m just picky, but IMHO, thats what the <body></body> element is for. And you can add margin: 0 auto; to just the Body element, and that will center the everything relative to the browser. Then the margins of the specific elements from there is up to you. Anyways, food for thought.

    • 0