One Column Flexible Width Layout
Horizontal Navigation Menu HTML5 Semantic Elements
Lite Version
One Column Flexible Width Layout
Horizontal Navigation Menu HTML5 Semantic Elements
Lite Version
This is a basic example of a one column flexible width HTML layout with horizontal CSS layout page navigation using the CSS float property. This version uses the HTML5 semantic elements nav, article, header, and footer. It is a good starting point for students learning CSS who are very new to web technology. Only one page is completed for the example.
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 sentences 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 practice.html file.
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 14 and 15 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!