Expand Body Element Width Beyond Width Of Window

I have a page which contains a dynamically-generated table. The number of columns of this table and the width of their content is determined at page generation time, but can be su

Solution 1:

I just added following CSS. And it works.

body {
    float: left;
    min-width: 100%;
}

Solution 2:

This isn't a solution to exactly the question you asked, but a neat option would be to add overflow:auto to #main, so it can scroll internally without breaking the layout.

#main {
    overflow: auto;
}

Demo: http://jsfiddle.net/dZS4V/

Solution 3:

This is an approach:

#wideContent {
    background: #FF0;
    width: 4800px; /* In reality, this will vary at runtime, so I cannot set an explict width on the body */
    max-width: 100%;
}

The wideContent div will adjust to the width of the window.

Solution 4:

After further fiddling, I've come up with a solution which involves adding an additional wrapper element to the three section elements. This may be useful to others with the same problem, however, I'm not going to mark this as accepted (yet) because I'm still keen to see if there's a CSS solution which doesn't involve modifying the HTML at all.

Anyway, this solution is to wrap the header, footer and div#main elements in a new div.layout-row element and add the following CSS:

    body {
        display: table;
        border-spacing: 0;
        min-width: 100%;
        box-sizing: border-box; /* Only needed if your body has padding or borders */
        margin: 0;
    }

    div.layout-row {
        display: table-row;
    }

    header, footer, div#main {
        display: table-cell;
    }

Seems to work in Chrome, FF and IE. Demo here.