Fluid Layouts and Flexible Images

A box set to width: 960px is 960 pixels wide on every screen, while a box set to width: 90% is 90 percent of whatever space its parent has. On a laptop the two can look the same. On a phone 375 pixels wide, the first one runs 593 pixels past the right edge and the second one fits. A layout built from widths of the second kind is called a fluid layout, and this lesson builds one step by step, together with an image that shrinks to fit it.

Starting From a Fixed Width

Here is the starting page: one gray container with a fixed width of 960 pixels, centered with margin: 0 auto.

``