One Column Flexible Width Layout Only div Used for Layout Horizontal Navigation Menu Inline & Background Graphics
One Column Flexible Width Layout Only div Used for Layout Horizontal Navigation Menu Inline & Background Graphics
This is a basic example of a one column flexible width HTML layout with page navigation.
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.
Two pages, the Home and the About pages, are completed.
The default flexible width nature of block elements allows content to resize. However your content may not look the way you want it at certain widths. For example too wide of a width and paragraphs may spread out too far and look like sentences. Too narrow a width may make sentence too short for optimal reading and raise problems with intermixing text with other assets like images.
Rendered at Maximum Width
Rendered at Narrowed Width
Source Code
This is the home.html file. It the top page for the web site. The top page would be named index.html when the file does not contain server side scripting code.
This is the about.html file. With static pages that a lot of HTML needs to be replicated on each page. The page navigation is one example. And even with the page navigation, you have small differences. For example if you want to make the loaded page navigation button to become inactive.
But also think about the page layouts. You may have one page layout for all your pages. Then again you could have different page layouts depending on the content. And even with the page navigation, you have small differences when you want to make the loaded page navigation button to become inactive.
This is the site.css style sheet. Making the style sheet external to the documents, the documents can share the style selectors. Changing a property or style then impacts all the pages.
Lines 7 and 8 provide fixed width boundaries to the normal flexible nature of block elements in a web browser. The width property is replaced by the max-width and the min-width properties to set those boundaries.
Get Skills to Work on Websites in 30 Days
Start today with easy to learn courses that quicky build your website skills!