CODEWITHSUNDEEP
htmlcssgoogle-chromecross-browser
user966939
user966939

Reputation: 719

Table's width not expanding fully on some window resolutions in Chrome

The following document looks like it should in Firefox, Opera, Safari and even IE6 and later(!), but not Chrome - at SOME resolutions (I'm guessing uneven widths?) http://jsfiddle.net/4BEvL/1/

The problem is that the menu doesn't expand as much as the content div, so it'll leave a gap at the edge:

http://i.imgur.com/3tGwD.png

Setting a MAX-width for the #container div instead strangely fixes the problem, but that's not the result I want; besides, it'll look pretty bad in IE6 (which I have yet to drop support for) since it doesn't support max/min-* CSS rules.

Can I fix this for Chrome somehow (without using CSS hacks)?

Upvotes: 0

Views: 307

Answers (2)

user966939
user966939

Reputation: 719

I fixed it by adding display:table; to the #container div.

(It compromises a few things on my site though).

Upvotes: 1

Rob
Rob

Reputation: 15160

Your table is inside #container which is set to 85% width of the body. So setting table to 100% width will only let the table expand to 85% of that. Percentages are always percent of its positioned parent which, in this case, is #container. But container is also constrained to be a minimum 800px wide so it won't shrink any further when you decrease the width.

Upvotes: 0

Related Questions