max-width all the way

2010-07-06

If you’re using a division of max-width: 50em inside a container of width: 100%, strange things will happen when you start resizing the page to something smaller than 50em. The container div will shrink to just around your inner div, but Safari and Firefox will display a horizontal scrollbar as if this outer div is still 50em wide.

Solution: use max-width: 100% on the container instead of width: 100%.

Thus not:

<div style="width: 100%; background-color: #eee;">
  <div style="max-width: 50em; margin: 0 auto;">
  </div>
</div>

but

<div style="max-width: 100%; background-color: #eee;">
  <div style="max-width: 50em; margin: 0 auto;">
  </div>
</div>

Whenever you use max-width, all you outer containers need to have either width: auto (maybe implied) or max-width: 100% (or another width that makes sense). All the way indeed.