Today, we launched Letters by Wordsworth, which is something of a combination blog/portfolio site for Cecilia Harris, an artist and calligrapher.

Another design by Kinsey Hamilton, themed and developed with a Drupal backend. While implementing this site was straightforward, I’m satisfied with a couple of aspects: namely, the borders around the landing page images, and how successful the fluid layout came to be.

While the borders probably could have been created using a fairly basic set of CSS3 rules, I recognize that its implementation is not yet standardized or widely adopted. We opted instead to make the whole border an overlay with a transparent center. Each image consists of three elements within a container div, whose position is set to relative, so that absolutely positioned elements within it are positioned absolutely relative to it. The three inner elements are:

• An anchor, which is set to display as a block, given a fixed width and height, and an absolute position so its z-index can be set high enough to display above the entire border structure,
• The border layer itself, which is just an empty div whose background is the border image, its width and height are fixed, and its position set to absolute so that it is positioned in the same space as the anchor and so that it can be placed in between the anchor and the image,
• An image, which is also positioned absolutely both to fit it within the border frame, and also so that its z-index can be set below that of the border and anchor layers.

<div style="position:relative;">
  <a href="" style="display:block; position:absolute; top:0px; left:0px; width:[val]px; height:[val]px; z-index:1;"></a>
  <div style="background: url(''); position:absolute; top:0px; left:0pz; width:[val]px; height:[val]px;z-index:0;"></div>
  <img src="" style="position:absolute; top:[offset]px; left:[offset]px; z-index:-1;" />
</div>

The fluid layout shines most on the same landing page. The obvious idea is to set each image block to float:left;, but this doesn’t allow the entire inner section to be centered on the page. Instead, each block must be set to display:inline-block;, which has the effect of giving each div block attributes, but positioned inline. The div containing the entire set of blocks must be set to text-align:center;. The problem with this is that if the last row has fewer blocks than there are columns, the grid is no longer maintained (because all content is centered uniformly in the container). The solution is to generate a number of empty “dummy” blocks (as many as the maximum number of possible columns) that have equal width to the grid blocks. Their height should be set to 0, however, because unneeded dummy blocks will flow below the grid; having an equal height to the grid blocks would create unnecessary blank space at the bottom of the page (equal to the number of extra dummy blocks divided by the number of columns possible in that resolution).