The main content will go here - this is given a margin left greater than or equal to the width of the element on the left. The navigation bar at the left uses an unordered list. The CSS uses a contextual or descendant CSS approach to limit the CSS effect to just the navigation bar:
- The list-style-type:none means that no bullets will show,
- the text-decoration:none means that the links in the navigation bar will have no underlining, and
- the a:hover will show underlining when you mouseover the links in the navigation bar.
This page uses media queries. Above 768px, the layout is in two columns, with the navigation bar at the left and the content in the column to the right. At 768px and below, the layout is in one column, with the navigation at the top and the content below. Thus on most phones, one would get a single column layout.
This CSS is not mobile-first; the mobile device would execute all of the CSS with the mobile code executed last.
The screen width is being displayed through the use of JavaScript.
Revised: September 23, 2021