1

I am trying to create two columns of equal width, the left one containing text and the right one containing an image. I would like the image to resize down to the width of the column if the image width is greater than the column width, but would like the image to keep its original size if the image is less than the column width. I have tried the instructions in this question, but the image, if larger, will consume whatever space it needs, squishing the column on the left containing text. I am wondering if this has to do with how "table-cell" divs behave, or if it is a precedence issue where the browser will accommodate an image before text. My code looks something like this:

<div style="display: table; width:100%;">
    <div style="display: table-row;">
        <div style="display: table-cell; width: 50%; vertical-align: middle;">
            <h1>Header</h1>
            <p>Description</p>
        </div>
        <div style="display: table-cell; width: 50%; vertical-align: middle;">
            <img style="max-width: 100%;height:auto;" src="image.jpg">
        </div>
    </div>
</div>

Also, I am using FireFox as my browser to test. Thanks!

EDIT: I also tried an alternative method to get the same effect using float divs (code below). The problem is I would like the two columns middle-centered, and I cannot get the smaller float div to size to full height in the parent container, so the inner contents are top-aligned. However, the image does resize properly, which backs up my hunch that this problem is related to how "table-cell" divs behave.

<div style="position: relative;">
    <div style="float: left; width: 50%;height:100%;background-color:#F00;">
        <div style="display: table;height:100%;width:100%;">
            <div style="display: table-row;height:100%;width:100%;">
                <div style="display: table-cell;height:100%;width:100%;vertical-align:middle;">
                    <p>content</p>
                </div>
            </div>
        </div>
    </div>
    <div style="float: left; width: 50%;height:100%;background-color:#F00;">
        <div style="display: table;height:100%;width:100%;">
            <div style="display: table-row;height:100%;width:100%;">
                <div style="display: table-cell;height:100%;width:100%;vertical-align:middle;">
                    <img style="max-width:100%;height:auto;" src="image.jpg">
                </div>
            </div>
        </div>
    </div>
</div>
Community
  • 1
  • 1
Dan Collins
  • 1,018
  • 1
  • 11
  • 20

1 Answers1

3

Code was working fine in Chrome. This seems to be an issue only in Firefox as per this article: http://www.carsonshold.com/2014/07/css-display-table-cell-child-width-bug-in-firefox-and-ie/

Adding table-layout:fixed; to the div styled display:table; gives the results you're looking for- allowing the image max-width to work and respecting the cell widths.

<div style="display: table; width:100%; table-layout: fixed">
  <div style="display: table-row;">
    <div style="display: table-cell; width: 50%; vertical-align: middle;">
      <h1>Header</h1>
      <p>Description</p>
    </div>
    <div style="display: table-cell; width: 50%; vertical-align: middle;">
      <img style="max-width: 100%;height:auto;" src="image.png">
    </div>
  </div>
</div>
lycorine
  • 188
  • 3
  • 10
  • Sorry for the delayed response, I didn't realize somebody had answered this, but this problem has still been haunting me -- this is perfect, thank you! – Dan Collins Apr 14 '15 at 17:09