Optimized Appearance - Web Standards: Mastering HTML5, CSS3, and XML - page 315

Absolute and Fixed Positions
Depending on the design and site structure, some page components (logo, menu, header, footer, and so on) are
intended to be fixed and should not move when the page is being scrolled.
The CSS rule position: fixed; is very similar to position: absolute; but the first one prevents element
scrolling when the user scrolls the page while the second does not. The position: fixed; rule is not supported
by Internet Explorer 6 or earlier, which was a major layout problem in web site development for years. Instead of
reverting it to position: absolute; to provide a similar effect, position: fixed; has been considered as
position: static; which results in no positioning at all. Consequently, a layer at the bottom of a web page with
position: fixed; which is intended to be a footer that remains intact when the user scrolls the page, appears on
the page according to the DOM structure in older browsers (prior to IE7), resulting in an unaesthetic appearance or
degraded functionality. Modern browsers support positioning correctly.
Tableless Web Layout
Until recently, especially before HTML5, a significant number of web sites applied presentational markup rather than
semantic code. (X)HTML tables have been used for arranging web site elements and ensuring pixel-by-pixel layout.
This easy and quick “development” was also encouraged by WYSIWYG development tools. However, using tables for
layout has many drawbacks. Web sites whose layout relies on tables waste bandwidth and take longer to download and
render. The document structure is illogical, making semantic data harder or impossible to retrieve. These web sites are
not accessible and are difficult to maintain. Generally speaking, the table-based layout is not mobile-friendly either.
Tableless web layout eliminates the use of tables for page layout and web page element positioning [1]. This does
not mean that tables are not allowed on web pages, but tables should be used exclusively for tabular data.
The positioning and layout of web page components can be fully controlled by layers that are represented as div
elements in the markup. In HTML5, sidebars and widget areas can also be separated logically within the main layout
of a web site using the aside element, which is suitable for contents aside the main page content.
The following sections describe the two most common types of web site layouts. Naturally, developers can create
other layouts, too, i.e., arbitrary layouts can be described by div elements.
Fixed-Width Layouts
Traditional web sites typically have a main container, often aligned or floated to the center, with a predefined width
in pixels (or other units). This approach worked satisfactorily until the early 2010s when mobile browsing gained so
much popularity that mobile support became a fundamental need, introducing a new era of web layouts. However,
many applications, especially industrial sites and web interfaces of older but widely adopted commercial software,
are still based on a fixed-width container.
Multiple-Column Layouts
A typical web page arrangement is the multiple-column layout with floating divisions [2]. Multiple-column sites
usually have a header at the top of each page. The menu is often provided on the left (or right). Additionally, a footer
is a frequently used component on the bottom of each page. The usual number of columns is one, two, or three.
Figure 9-1 shows a typical three-column layout.