Let's see how the problem
of different screen sizes
is solved using various
types of layouts.
One way is to fix the width of
the entire page and width of
other elements in pixels:
Resize the output panel in full screen mode and notice that the width of all elements is fixed. The width of body
is set to 900px and margin
is set to auto
, which restricts the content to 900px and centers the content horizontally. Hence, this is called a fixed layout.
This design looks good on desktop screen sizes but on tablets and mobile phones, a horizontal scrollbar appears, which doesn't give a good experience.
This was standard layout a few years ago,
before smartphones were introduced.
But it's no more used for
designing modern websites.