Question

I’ve a problem laying out an e-commerce page with very strict layout requirements. We want to show a product image alongside a product description, with some optional extra information about the product below the image. The width is constrained by our overall page layout, while height can be variable. The answer seems to be “you can’t do this with pure CSS”.

Here’s a mock up:

The marked widths are 372+12+178=562 leaving 8px in borders. The image and description areas have 2px borders, making a total of 8px horizontal pixels, and 562+8=570.

I’ve got the vertical centering of the image mostly sorted, what breaks the design is the optional ‘extra info’ panel. The site is generated by PHP, which optionally includes the <div> for that extra info if the data is available for the product. I’d be happy to always include the ‘extra info’ element and style it to be invisible if it’s empty, if it helps solve the design problem.

Requirements:

• Product image can be any aspect ratio. Some are thin and tall, some wide and short, some square.
• Product image should fill its area horizontally and naturally size itself vertically by its aspect ratio.
• Product image should be vertically centered in its area (blue). When extra info is not visible, image would be vertically centered alongside the Description area. When extra info is visible, image should be vertically centered in the remaining space.
• Extra info can be any amount of text and aligned to bottom of product image area. So, cannot have fixed height.
• Product Description can be any amount of text.
• The ‘image and extra info’ column should vertically match the size of the ‘description’ column and vice versa.
• Description and Extra Info boxes employ CSS gradient backgrounds and borders. All these divs must actually size themselves accordingly, I cannot get away with ‘faux columns’ as described here http://www.alistapart.com/articles/fauxcolumns/.
• Do not want to use Javascript to align elements. Yes, I’m sure we’re all jQuery masters and it’s a wonderful tool, but it shouldn’t be required for this layout.

My design so far employs pure CSS and no tables, using the table-cell style to center the image, but there is some fudgery to do with min-height that breaks when different size images are used. A jsfiddle: http://jsfiddle.net/GJVbX/

That fiddle is easily broken by e.g. tripling the Product Description text content, or adding “width: 370px; height: 400px;” to the so it’s not a nice height.

An example of my design that works well:

However, it’s not hard to find an image size that breaks it:

Note how the tall product image makes the image div extend vertically and the Description column cannot keep up.

I’ve been on #css IRC channel on Freenode and was told that this is possible using pure CSS, using tables for this layout task is a sign I don’t understand CSS layout and should hire a professional, and that to achieve the vertical centering I should use “display: table-cell”. However, extremely helpful as they were, the discussion was too complex to continue on IRC. I understand that <table> brings with it all sorts of horrible layout mechanics that is simply broken for accurate page layout, however, I can’t think of a better solution, mostly because of my requirement to keep the columns the same height.

Would appreciate constructive criticism, alternative solutions, or even just confirmation of my plight 🙂

EDIT – here is the HTML and CSS content from the jsfiddle given above, for those who prefer this content contained within the stackoverflow question. This is extracted from the live site, cleaned a little for indentation, with a dummy product image (produced by the thumbnailer script employed in the live site) and dummy text.

HTML:

<div class="productInfo">
  <div class="productTopWrapper">
    <div class="productImgWrapper"><div class="wraptocenter"><span></span><img src="http://nickfenwick.com/hood.jpg"></div></div><div class="extraInfoWrapper gradientBackground"><div class="extraInfoInner">Extra info goes here.</div>
      </div>
      <div class="productDescription gradientBackground"><div class="productDescriptionInner">
          Product Description goes here.<br/>
          Product Description goes here.<br/>
          Product Description goes here.<br/>
          Product Description goes here.<br/>
          Product Description goes here.<br/>
          Yet the gradient ends too soon because this div doesn't fill its space vertically!
          </div>
      </div>
    </div>
</div>

CSS:

DIV.productInfo {
    max-width: 570px;
    font-family: Verdana,Geneva,'DejaVu Sans',sans-serif;
    font-size: 12px; /* Just for this fiddle */
}
.productInfo .productTopWrapper {
    overflow: hidden;
    margin-bottom: 12px;
    position: relative;
}
.productInfo .productImgWrapper {
    width: 372px;
    min-height: 353px;
    float: left;
    border: 2px solid #cbcbcb;
    text-align: center;
}

/* BEGIN css wrap from http://www.brunildo.org/test/img_center.html */
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 372px;
    height: 309px;
}
.wraptocenter * {
    vertical-align: middle;
}
/*\*//*/
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/**/
*:first-child+html {} * html .wraptocenter span {
    display: inline-block;
    height: 100%;
}

/* END css wrap */

.productInfo .extraInfoWrapper {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 376px;
}
.productInfo .extraInfoInner {
    padding: 5px;
    border: 2px solid #cbcbcb;
    text-align: center;
}

.productInfo .gradientBackground {
    background: #999; /* for non-css3 browsers */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0d1d3', endColorstr='#fefefe'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#d0d1d3), to(#fefefe)); /* for webkit browsers */
    background: -moz-linear-gradient(top, #d0d1d3,  #fefefe); /* for firefox 3.6+ */
    background: -ms-repeating-linear-gradient(top, #d0d1d3,  #fefefe);
    background: repeating-linear-gradient(top, #d0d1d3,  #fefefe);
}.productInfo .productDescription {
    width: 178px;
    min-height: 353px;
    margin-left: 388px;

    border: 2px solid #cbcbcb;
}
.productInfo .productDescriptionInner {
    padding: 5px;
    font-size: 1.2em;
    line-height: 1.2em;
}

Answer 1

Unfortunately, which versions of IE you are required to support affects more than just CSS3 eye-candy. display: table-cell, for example, isn’t avilable in IE7. And a myriad of other things present in other browsers are missing or buggy in IE7 and IE8. IE9 is a considerable improvement however.

To be honest, even if you were restricting yourself to latest version of all browsers, this layout would still be difficult in pure CSS, whatever people on IRC may claim. When new layout managers such as Flexible Box and Grid Layout are ubiquitously available, it will be easy, but we are a few years off from that, I’m afraid.

Anyway, here is my attempt at your required layout:

http://jsfiddle.net/amtiskaw/tNywn/

It requires IE8 and above, as it uses display: table-cell to vertically centre the product image. It also has a quirk where the content of the extra-info box will never overlap vertically with the content of the product-info box, although their borders will look correct.

The stretched borders and gradients are achieved by using additional elements which are sized to vertically fill the product container element using absolute positioning, then placed behind the content using negative z-indexes.

Personally, I’d me more inclined in this case to use tables or a bit of jQuery to get the sizing right, rather than this kind of CSS hackery. If you use a table, you can give it an attribute role="presentation" to indicate to screen readers and other semantic tools that it is being used for layout purposes, rather than to express tabular data. This pattern was approved by the W3C.