There is enough room to show #aside and #contentinfo side-by-side.
We now have a chance to bring #aside one row up, next to #complementary.
Note that we have set a maximum width that prevents the main box to be wider than 550px.
Removing this styling would let the 3 boxes at the center fit the full width of the viewport
This is another common layout pattern. We cheated a bit by making #aside the same width as #complementary (design call)
Once again, we have set a maximum width to prevent the main box from being wider than 550px. Removing this styling would let the 3 boxes at the center fit the full width of the viewport
We have enough room to show #main, #complementary, and #aside side-by-side.
We can now display 4 boxes side-by-side (#main, #complementary, #aside, and #contentinfo).
Styling #aside with a 490px fixed width send #contentinfo back to the bottom.
The viewport is now wide enough to accommodate all the containers side-by-side. We set a maximum width on body to respect the max-width values we have set for each box.