3 Columns From 1 + Link Icons

Columns of Equal Height + Using Images To Show Link States

By Christopher Hester


15th September 2003

Comments

This demo illustrates how to achieve a layout with 3 columns of equal height using only one column. The trick is to use a central column (this one) and add borders to it. Then position your other 2 columns so they overlay the borders.

#left {
 position:relative;
 top:0;
 left:0;
 width:532px;
 z-index:1;
 padding:15px 20px 15px 20px;
 background-color:#ffefd5;
 border-top:none;
 border-left:20px solid #f5deb3;
 border-bottom:none;
 border-right:168px solid #fae4c4;
}

The code above sets the central column which is positioned in the top left corner of the screen. Note the large size of the right border! To get the extra border on the right, I added another div ontop with a small right border:

#container {
 position:absolute;
 top:80px;
 left:0;
 width:760px;
 padding:0;
 margin:0;
 border-top:none;
 border-right:20px solid #f1d7b4;
 border-bottom:none;
 border-left:0;
}

The top uses an image placed over the normal text headers. This way screen readers and anyone not seeing the image are still able to read the titles.

 

Using Images To Show Link States

To achieve the icons next to each link that show their visited state I made three images:

- An orange icon indicating a new link
- A red icon indicating an old (visited) link
- A yellow icon used when hovering over the links

The images are set as backgrounds for all links as shown in the code below. To avoid the link text running over the images I added left padding.

:link, :visited {
 text-decoration:underline;
 color:#840;
 padding-left:14px;
}
:link:focus, :visited:focus {
 color:#840;
}
:link {
 color:#840;
 background:transparent url(images/link-orange.gif) no-repeat bottom left;
}
:visited {
 color:#b70;
 background:transparent url(images/link-red.gif) no-repeat bottom left;
}
:visited:hover {
 color:#840;
 background:transparent url(images/link-yellow.gif) no-repeat bottom left;
}
:link:hover {
 color:#b70;
 background:transparent url(images/link-yellow.gif) no-repeat bottom left;
}

Although this code looks complex it's because I'm following the guides for browser-compatible link code described in David Baron's excellent article Notes On Suggesting Link Styles.

To avoid flicker I load all 3 images at once onto the page simply by using a hidden div:

<div id="hidden">
<img src="images/link-orange.gif" width="10" height="11" alt="" />
<img src="images/link-red.gif" width="10" height="11" alt="" />
<img src="images/link-yellow.gif" width="10" height="11" alt="" />
</div>

This div is moved off the screen so the images aren't seen. Perhaps not the most elegant solution, but hey, it works.

Drawbacks

The drawbacks to this idea need to be considered if you plan to use images next to links. Firstly, I am aware of a superior method by which only one image can be used and easily moved up or down to show the required icon. Claire Campbell has published an article which demonstrates this technique entitled CSS Rollover Background Images - No Preload Required. However I consider the following issues to be worth noting here:

  1. Browser support varies when the link text spills onto two lines. In Internet Explorer 6, the background moves to the bottom line spoiling the effect. While in Mozilla 1.5, the left padding affects all lines of the link. On the second line you get a gap, then the link text. Only Opera 7.11 shows it nicely.
  2. If a single image is used rather than 3, you would have to ensure the gaps between the icons were large enough to avoid the wrong icons showing. I consider a vertical image to be more suited than a horizontal one (unless you have really short columns of text).
  3. If the single image fails to load, the whole effect is ruined, whereas with 3 separate images hopefully at least one will show up.
  4. Enlarging the browser text fails to also enlarge the icons, which can look too small. Likewise smaller text can make them look too big.
  5. Images that are also links need a stylesheet class or the icons and padding affect them too.

Of course you don't have to use rounded icons like mine. You might make the hover graphic a question mark. Or the icons could be squares to represent pages. The beauty of the idea is that the user can see instantly which links they have yet to check on a page. I find it clearer than simply changing the link text colour, though a change of background colour would stand out the most. I feel these icons add to the accessibility of mine without changing too many colours in the layout.

 

Notes

Both demos work in IE6, Mozilla 1.5, Firefox 0.10.1 Preview 1, Opera 7.11, Opera 7.54 and Opera 7.60 Preview 2 tested on Windows XP. Links don't change image in Firefox 4.0. If you've found they work (or fail) on other browsers or platforms let me know.

Comments

 

© Chris Hester 2004 · Last updated: 29 March 2011