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 th

Solution 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)

Solution 2:

I haven't tested this in IE6 or 7, but it might be moving in the right direction...

http://jsfiddle.net/wxrJU/10/