Question

I have a table with content that is larger than its div container.

In IE, the parent containers expand to accommodate the table.

In Firefox, the div container only widens up to a certain size, and I can’t seem to make it any wider.

I don’t want to use CSS overflow to scroll or clip the content. I want to make the parent containers bigger if the table content is larger.

Below is a fiddle showing what I mean. You have to make your browser window fairly small to see the problem. With IE, the problem seems to show in the fiddle but not when I put the HTML in a file on my computer and open it up.

Example

How can I solve this problem?

Thanks,
Tedderz

Answer 1

From what I can tell it seems you’re having problems with the div not stretching past the right side of the browser when the content stretches. Try setting a min-width or width to the div close to the table width if you can. I noticed someone here: CSS – Make outer <div> background to expand to inner <div> width asked much the same question though they never seemed to find a great solution besides make the outer div bigger explicitly either. Good luck, and I’ll post back if I find anything more.

-Adad64