Menu
I want the content of a web page to be centered and max width of, say 900px.
From my research and testing, it looks like this is the way to do it, but I wanted to confirm:
<body style="max-width:900px; text-align:center;margin-left:auto ;margin-right:auto"> Obviously, you'd put the style in the CSS.
And I figure anybody with a big screen is going to have a fairly new browser.
343
1280px and 1920px are the two standard widths for web design. A 1280px website will look great on laptops and mobile devices but not so great on large monitors. To ensure your site looks just as good on big screens as it does on small screens, set your max site width to 1920px or more.
This is a simple way to put it: if the element would render wider than the max-width says it should be, then the max-width property wins over the width property. But if it would render less than the max-width says, then the width property wins. In mathematical terms: if width > max-width; let the browser use max-width.
If you set the width to 100% on the body element you will have a full page width. This is essentially equivalent to not setting a width value and allowing the default. If you want to use the body element as a smaller container and let the HTML element fill the page, you could set a max-width value on the body.
Using width, max-width and margin: auto; Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins: This <div> element has a width of 500px, and margin set to auto.
Why use a wrapper unless and until you need it? I wouldn't wrap stuff nilly-willy just because you can, it adds up. Also, you can use the Body tag as a "free wrapper" if you want:
CSS:
html { margin: 0 auto; max-width: 900px; } body { /* whatever you want */ } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
