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.
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.
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:
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.
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.
© Chris Hester 2004 · Last updated: 29 March 2011
A Design Detector production.
Use these links to show the changing icon colours.
This column has no background colour! It simply has text positioned over the border set by the middle column. This enables it to be the same length.
#right {position:absolute;
top:80px;
left:593px;
width:127px;
z-index:2;
color:#42240c;
background-color:
transparent;
padding:15px
20px 15px 20px;}