1. Computing

Discuss in my forum

Free Web Template: Floating Navigation Box Layout

By , About.com Guide

Floating Navigation Right Layout

Floating Navigation Right Layout

Jennifer Kyrnin

About this Web Template:

This Web site template allows you to put your navigation in a floating box at the top right or top left of the page. The example has a red-dashed border around the navigation, but you can change that to whatever makes sense for your site.

See The Template

Works in Browsers:

Windows

  • Firefox and Mozilla 1
  • Internet Explorer 5 and 6
  • Opera 8.5 and 9

Macintosh

  • Firefox and Mozilla 1
  • Internet Explorer 5
  • Netscape 7
  • Safari 1

Details:

  • floating navigation box 150 pixels wide, with red dashed border
  • main column takes up the remaining space, wrapping around the navigation, with a white background

To Use the Free Web Template:

  1. Copy the CSS into a document named styles.css
  2. Copy the HTML into another document in the same directory
  3. Change the text to your content
  4. Change the float:right; to float:left; if you want the box on the left side
  5. Publish both documents

The Web Site Template Data:

More Web Site Templates:

Terms of Use:

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.

©2013 About.com. All rights reserved.