7

Consider the following piece of code:

HTML:

<div>
    <img src="http://placehold.it/600x150" />
</div>

CSS:

div { max-width: 200px }
img { max-width: 100%  }​

The image will never be wider than 200px, regardless of its native size. So far so good.

Here's the fiddle: http://jsfiddle.net/PeAAb/

However, if the parent element has its display set to table:

div { max-width: 200px; display: table }

the image magically expands to its native width, expanding the table with it.

Here's the fiddle: http://jsfiddle.net/PeAAb/1/

Same happens with an actual table: http://jsfiddle.net/PeAAb/2/

Question: Is this expected behavior? If so, what can be done to work around this issue?

Setting the parent's width (even a percentage-based width) instead of max-width correctly squeezes the image back into its box, but is not a solution. I need the parent to be fluid (I'm using this for the main structure of the site, so that I can have the sidebar HTML appear after the main content in the source, but with the sidebar being fixed width).

Also, setting table-layout to fixed seems to have no effect here.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Joseph Silber
  • 214,931
  • 59
  • 362
  • 292
  • I'm trying to build something responsive in SharePoint 2010, which has a really nasty habit of wrapping nested tables around things. If you know of a solution to this (that works back as far as IE8) I'd love to hear about it. @pKs's solution (display:block;) fails in IE8/9 here :( – Olly Hodgson Feb 06 '13 at 18:04

2 Answers2

7

The problem here is that a table (or a div set to behave like a table) is not a block element, and max-width only applies to block elements. My only suggestion to you is to wrap the table element in a div with display: block; set.

Here's the fiddle in case you're interested: http://jsfiddle.net/PeAAb/4/

David Vasquez
  • 1,163
  • 1
  • 15
  • 22
  • Thanks for your *correct* answer, but in my case this doesn't help me. Take a look at [my demo](http://jsfiddle.net/659JN/). It works correctly in webkit, but nowhere else. Wrapping another element inside of it [does not help](http://jsfiddle.net/6BWCw/). – Joseph Silber Aug 08 '12 at 23:57
  • I'm begrudgingly accepting this answer, since it's correct. However, it doesn't solve the problem. – Joseph Silber Nov 09 '12 at 18:25
  • Joseph, thank you for the acceptance. I wish I had a solution to your problem, as I don't typically like to post "that can't be done" responses – but after some research combined with my own personal experiences, I haven't been able to come up with a good solution to your problem. In fact, this has perplexed me quite a bit; I look forward to hearing from anyone who can solve this better than I have. – David Vasquez Nov 09 '12 at 18:59
-1

I know this is pretty late, but found the answer, which turned out to be pretty simple and super easy, table-layout: fixed.

Found here: http://blog.room34.com/archives/5042

Anyway, this is for those looking for an answer to this conundrum as I was.

manonatelier
  • 1
  • 1
  • I would briefly explain or paraphrase the article as to why `table-layout: fixed` is an answer here especially since the OP said that didn't work for him. – Dan Jan 04 '14 at 01:37
  • This only works with a specified width. The question was how to achieve this with a `max-width` set. The parent has to be fluid width. – Joseph Silber Jan 05 '14 at 03:34