Two Column Layout And Vertical Menu Tutorial
Completed Preview
Two Column Layout And Vertical Menu Tutorial
Completed Preview
This is the completed example for this tutorial. It is a very basic example of a two column fixed width HTML layout with vertical hyperlink page navigation.
The layout is designed for a fixed width left column and an infinite width right column
This is a good starting point for students learning CSS who are very new to web technology.
Only one page is completed in this tutorial.
Source Code
This is the completed index.html file.
Only the div element is used for layout. This means the newer HTML5 semantic versions of the div tag such as section, article, nav, header, footer are not used. This approach makes the layout natively supported in Internet Explorer versions 6, 7 and 8.
The tutorial introduces the idea of the style sheet file so that CSS can be shared between multiple HTML files.
This is the completed site.css file.
The tutorial uses mostly id selectors to make how HTML elements are targeted for styling easier to follow. The id selectors are those that begin with the # symbol.