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.