Rein In Fluid Width By Limiting HTML Width

Avatar of Chris Coyier
Chris Coyier on (Updated on )

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.