fixed layout + wide content = tables?

问题

I have a webpage which has fixed width layout. It used tables before and I re-created it using divs. In general I am happy with it (footer sticks to the bottom nicely now).

But there is a problem - I cannot control the contents and sometimes it can contain very wide elements. In current (divs) layout, if element doesn't fit to screen you have to scroll right (you can't avoid that) and there page frame ends, you would see blank space (i.e. no header, footer).

The cause of it is that div only expands to visible window.

I see only two options of how to solve it:

go back to tables layout. It was working correctly for this case - was expanding beyond the window frame if content is wider.
implement JavaScript solution which will check the width and expand it if needed. But I think it's just wrong.

Is there any better way to solve it? I'd like to achieve similar behavior as with tables, but using divs.

And please let me know if you need any more info, thanks.

EDIT: I need it working on IE6 (or at least IE7 if IE6 doesn't look ugly) and above + all modern browsers.

EDIT2: Here is an example where you can see what I am talking about: http://jsfiddle.net/wxrJU/6/. If you scroll right you can see that there's blank space - divs frame doesn't expand. If someone could provide solution implemented in jsfiddle as well, I would appreciate it :).

回答1:

A no-brainer (sp?) would be to use CSS2 display: table; along with table-celland maybe table-row values (IE8+).

If your header and footer aren't visually wide enough when the content is very wide, here are some options:

see the technique called faux-columns and apply it to create faux-rows (sorry for the neo-neologism :) ).
As your content can be of any height (contrary to fixed width with faux-column), you'll have to apply multi-backgrounds: one positioned as left top for header, another positioned as left bottom for footer.
CSS3 background-size will resize to the desired width a background-image. IE9+ according to the great site http://caniuse.com that is more than two thirds of the browsers out there (except if your users use a lot old IEs like in an administration or a huge company). See SO polyfill background-size for IE8-

EDIT: forgot about CSS3 layout options.

Instead of display: table;, you can also consider CSS3 options:

Flexible Box Layout Module (should work for 50-60% of your users because it's IE10+, polyfills exist)
Multiple column layout (same as for flexbox: IE10+, polyfills exist)
too soon for Grid Layout (works on a single browser for now: IE10)