I got the idea for this simple layout from a forum I was reading, where the writer wanted the text in the layout to wrap around the navigation box. I just thought it might look nice. It uses three divs to create the navigation, the main section, and the spacer for the navigation. It uses z-index to stack them.
This layout uses a spacer div to move the text in the main window open. You'll need to adjust the size of that div relative to your navigation window size.
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
- navigation div is 200px wide, white background, and solid black 1px border, positioned at 0top 0left
- main div is 600px wide, green (#396) background, and solid black 1px border, positioned using margins at 0top 0left
- spacer div is 140px wide, floating left and cleared on the left
- the header is an h1 element placed with margins 25px top margin and 225px left margin
- Copy the CSS into a document named styles.css
- Copy the HTML into a file in the same directory
- Change the text to your content
- Publish the documents
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.
