This layout was inspired by the back cover of a book. What I liked about that print layout was the way the different boxes and text lay on top of one another. I chose to use a faux column for the side accent color, but I could have used a thick border on the container element if I didn't want to use an image. The capital letter is done with the :first-letter pseudo-element, so won't work in some older browsers.
Windows
- Firefox and Mozilla 1 and 2
- Internet Explorer 7
- Internet Explorer 6 it looks different, but still interesting
- Opera 8.5 and 9
Macintosh
- Firefox and Mozilla 1 and 2
- Netscape 7
- Safari 1 and 2
- If you use a different background image, make sure the margin on the col2 column is indented the width of the graphic.
- I used the faux columns technique to get the border to display no matter how tall the content is
- Copy the HTML into a document on your Web server - this is a snippet of HTML, rather than a full page
- Copy the CSS into a document named styles.css and place it in the same folder
- Copy the image to a file named zoverlaps.gif and place it in the same folder
- Link to the CSS in the head of your document
- Publish the Web page, CSS, and image file
You are free to use any of the free Web templates here for personal or commercial designs, either in print or on the Web, excluding items for resale. You may not give away, sell, or redistribute the files in any way. Do not post these files on any another Web site, electronically distribute them, or include them in any package for distribution. If you find these files useful, please include a credit line or a link back to this site [http://webdesign.about.com/]. Terms of use last modified 8/29/2004.
