Expand body to fit all content

If content is wider then browser window, body and html tags remain same width as the screen, and if you scroll to the side, some elements will not go beyond body. Here is a fiddle to display what I mean. The content box is wider then the screen, and if you scroll to the right, header doesn't expand beyond one screen width.

For now, I was able to fix it by width: max-content.

body { width: -moz-max-content; width: -webkit-max-content; } 

However, this only works in Chrome and FF, and not in IE.

Are there different, better-supported solutions?

2 Answers

Try this css code

body{ margin: 0; padding: 0 } .header{ width: 100%; max-width: 100%; } 

see demo

Under my understanding, I think set position: fixed and width:100% to header will work. But you may need to adjust margin-top for content.

Here is the demo