I am working on a web page that used a fixed width layout, centered in the browser. The width of the centered container is set in pixels.
On a couple of pages, there is a large data table inside the content container. In Firefox the table overflows the fixed width container. IE is more complex and will expand the container around the table, and because of some layout issues the container uses overflow:scroll just for IE.
I need to find out if I can use a fixed width on the container, but also allow it to expand to wrap the large data table. I also need to avoid a solution where I would be modifying the HTML… I can’t for example use an ID to only target those containers on pages with large tables. I need a pure CSS solution.
My feeling is that this is impossible, and I am going to HAVE to put an ID on those specific containers that need to be larger than the standard. I’m asking here because I really need a second opinion.
Just a note: I have also experimented with min/max-width, without success.
If min-width and overflow don’t work, you’re going to need css hacks.
If the problem with min-width is that the container is a block-level element and expands to page width, try using a variant of display:inline on that container, so it doesn’t stretch. (Or maybe margin.)