Grow your CSS skills. Land your dream job.

Rein In Fluid Width By Limiting HTML Width

Published by Chris Coyier

The <html> element is the highest level element on any web page. Every other element is within it. If you are making a fluid width site but wish to limit the maximum width it can expand (a good idea), you can do so easily by literally applying a max-width to the html element.

html {
  max-width: 1200px;
}

Nothing will naturally grow wider than that unless explicitly forced to. You can even keep things centered.

html {
  max-width: 1200px;
  margin: 0 auto;
}

But what about background? Does it cut off now on the edges if you go wider? Nope. The html element is unique in that way, and the background will fill the page regardless of you making it smaller.

html {
  max-width: 1200px;
  margin: 0 auto;
  background: #eee; /* Fills the page */
}

One more slightly weird thing... despite the HTML element respecting it's new size and being the top most element, absolutely positioned elements will still be relative to the browser window rather than the html element unless you set the position property to relative.

html {
  max-width: 1200px;
  margin: 0 auto;
  background: #eee; /* Fills the page */
  position: relative; /* Fix for absolute positioning */
}

Works in all regular browsers plus IE 8+. IE6 & 7 just leave the html element full width, which isn't the end of the world.

Big thanks to Kit MacAllister for writing in about this one.

Comments

  1. Permalink to comment#

    Won’t fixed-position elements also be relative to the browser as well?

  2. Permalink to comment#

    Unfortunately, webkit has a major bug with rounding pixel values from percentages and it’s dangerous to use for layout

  3. Permalink to comment#

    I usually set max-width on the body instead. That way, if I want to, I can have separate backgrounds for the viewport and the page itself. Not always a consideration, but you never know. I’m also more comfortable setting the width on the body rather than the html element in terms of browser compatibility, but I don’t know of any bugs that back up that concern. :)

  4. Sasha Sklar
    Permalink to comment#

    While I appreciate the desire to get your markup down to the absolute semantic minimum number of tags, perhaps the last sentence should read:

    IE6 & 7 just leave the html element full width, so you might instead use a wrapper div which isn’t the end of the world.

    • Permalink to comment#

      Or you can use element instead with no need to add another div.

      But one note though about using if you are using it on a website that has RTL styling it won`t work properly in IE6 & 7 even with a correct lang & dir attributes, in this case you have to use a wrapper div. i haven`t tried before to know if it works properly with RTL or not.

  5. Permalink to comment#

    Kent, you’re right. This post gets a few details wrong.

    A background will always be propagated to the canavas when it’s on the root element (except for some strange cases involving background-attachment behavior). The canvas will also paint the background of the BODY if HTML has no background explicitly set. Absolutely positioned elements with non-positioned ancestors are positioned with respect to the ICB, not the window/viewport. If they were anchored to the viewport, they would be fixed.

    These might be the most misunderstood concepts in CSS.

    • GreLI
      Permalink to comment#

      As per CSS2.1 Initial Containing Block de facto is viewport: “For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media.”

    • Permalink to comment#

      ICB? Ice Cold Beer? Italian Cheese Bread? Oh… Initial Containing Block. ;) That’s not an acronym I hear every day. :)

    • Permalink to comment#

      Thanks Josiah!

      Bloody acronyms…

  6. Permalink to comment#

    It’s worth to mention that besides max-width there is also a min-width parameter. IE6&7 consider both as width property.

    IE FIX

    I found this online. It shows javascript fix for older IE to emulate min and max width :
    http://javascript.about.com/library/blwidth.htm

  7. Wonderful tricks Chris!
    I didn’t know the special behaviour of the html and the background! Pretty nice ;)

  8. I just started doing this on the element along with adding a min -width. Any major advantages to doing this on the element over the ?

    • oops that should be … currently using this on the BODY element. Are there any major advantages of using HTML element vs. BODY element ?

    • Keyamoon
      Permalink to comment#

      Same question. Any reason for not using it on body?

  9. Permalink to comment#

    But what if I want the header or footer backgrounds to stretch the with of the screen (but each with a containing element that gives them a min-width)? Will this cut those off? Or is it a better solution than having a containing div within those elements?

    • Keyamoon
      Permalink to comment#

      Hmm, I think a .wrapper class with the max-width properties stated on this article would be the perfect solution. It can then be added to the header/footer section of the site while allowing its parent to have stretched backgrounds.

  10. I would suggest that if you were to use this to use it on the body tag or and additional wrapper within the body tag. I can’t see any advantage of using on the html tag

  11. Permalink to comment#

    I consider that the html element should never be styled or considered.
    Even the body.

    Starting with a wrapper is way more flexible !

    • Permalink to comment#

      Agree with you Tof.
      It’s a kind of semantic discussion, ( style the HTML, or Body, or none)
      Nice, but for me #wrapper is the simplest solution too.

  12. Permalink to comment#

    It is stated in the CSS2 specification by w3c that absolute/relative positioned elements will be positioned relatively to the next parent element whose position is either absolute or relative. So it is not a “weird” behavior, it is actually the right (specified) behavior.

    ;)

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".