RKN Layout Page
Here is the layout I am aiming for:
1. Header area fixed at top.
2. Footer area fixed at bottom.
3. Left side Navigation area fixed in relation to content area. Scrolling based on number of links
or size of browser
window.
4. Main content area on right side. Scrolling based on length of content or size of browser window.
5. Layout width to fit in maximized browser window for screen resolution set to width of 1024 pixels.
6. Main content area to fit in maximized browser window for screen resolution set to width of 800 pixels.
7. Layout should be centered in browser window when browser window width is greater then layout width.
8. Should be able to scroll to extreme left or right of layout when browser window has less width then layout.
9. Should not see scroll bars for main browser window.
The Links on the left show how the layout changes based on Different DTD types and CSS files. The intention to help me test my layout code and help me find the layout code that presents my pages in the way that I intend. My goal is to find a layout the will work with IE6 and IE7, and hopefully Firefox.
Layout out 1 is my first attempt and is really close to what I want to achieve. One problem I found right away is that I cannot scroll all the way to the left of the page when the browser window width is less then layout width. Also IE6 breaks my format all together. I also had to add line breaks to the bottom of the main content area to get the last line to show above the footer when this area scrolls due to length of content. The scroll arrow at the bottom does now show since it is really under the footer.
This page was updated: 18-Jun-2008 16:00:25 GMT