CODEWITHSUNDEEP
htmlcentercss
Ben Thomas
Ben Thomas

Reputation: 1488

Div doesn't center when min-width set

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.

Upvotes: 2

Views: 10764

Answers (4)

Jordan Foreman
Jordan Foreman

Reputation: 3888

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.

Upvotes: 2

Sparky
Sparky

Reputation: 98738

You have not specified a fixed width for your content container so by default it's going to take up the full width of it's parent.

And you can't set a min-width if you have a fixed width.

Typically, you'd have a separate CSS sheet just for mobile devices and use a media query.

Upvotes: 0

Adaz
Adaz

Reputation: 1665

Yes, min-width will make your div 480px wide on small screens - it means that if the screen is smaller that 480px, your div won't fit.

The thing is, div is a block element so if you won't specify the width, it will stretch to be as wide as the parent element.

I would suggest to look into media queries

I hope it helps!

Upvotes: 2

Andres I Perez
Andres I Perez

Reputation: 75399

That's because min-width is a constraint and not a width declaration. Auto centering using margin:0 auto only takes a width declaration to work. One suggestion would be to just define a width for your #content area and add a @media query for mobile devices with a width of 100%.

e.g.

#content { width:960px; }

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation:portrait) {
    #content {
        width:100%;
    }
}

Upvotes: 4

Related Questions