CODEWITHSUNDEEP
cssresponsive-designcss-tablesfluid-layout
Joseph Silber
Joseph Silber

Reputation: 219920

Responsive images in a fluid-width table (max-width)

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.

Upvotes: 7

Views: 14838

Answers (2)

manonatelier
manonatelier

Reputation: 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.

Upvotes: -1

David Vasquez
David Vasquez

Reputation: 1223

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/

Upvotes: 7

Related Questions