A fixed-width layout assigns absolute horizontal dimensions to containers and elements. For example, a 960px body can contain a 640px article and a 320px aside. The result is predictable at the intended size, but screens narrower than 960px cannot display the page without horizontal scrolling. section 6.3.4 section 6.7
A fixed article-and-aside layout
body { width: 960px; } article { width: 640px; padding: 16px; } aside { width: 320px; padding: 12px; } The fixed widths establish a 2:1 article-to-aside relationship, but the body remains wider than smaller viewports. section 6.3.4
To make the same structure adaptable, replace fixed child widths with percentages and cap the outer container with max-width. Convert each width using: element percentage = (element fixed width ÷ parent fixed width) × 100. Thus, a 640px article inside a 960px parent becomes 66.67%, while a 320px aside becomes 33.33%. Apply the same conversion to related padding and margins when needed. section 6.3.4 section 6.7
Listing 6.2 A fixed-width layout
body {
width: 960px; #1
}
header {
padding: 16px;
}
article {
width: 640px; #2
padding: 16px;
}
aside {
width: 320px; #3
padding: 12px;
}
Inspect the compact CSS listing for the fixed body, article, and aside dimensions. section 6.3.4
