Different Types of Layout - Fixed

There are 3 main types of web layouts. The first is a fixed layout. This means that the layout does not respond to changes in the viewport. It stays exactly the same no matter the screen size. For a long time this was the primary way that web pages were developed, but now developers must take into account users on a huge number of different screen sizes and so more practical layout options have become increasingly popular.
Fixed layouts are made using fixed widths and heights for elements. You will notice that when you resize the view that it creates horizontal and vertical scrollbars as the content overflows out to the side. This is one of the major down sides to fixed layouts.
Fixed Layout stays the exact same size as you resize the view:

Fluid

A fluid layout responds to the viewport and scales up and down. A fluid layout generally makes use of percentages. If a two column layout has the main content having a 60% width and the side having a 40% width, then it will have these widths on a desktop view, as well as on a mobile device. The width percentages stay the same and the content just adjusts to the available space.
Fluid Layout scales as you resize the view:

One of the issues with fluid layouts is that even though they scale content it means that our designs can get quite distorted as they change from desktop to mobile view. Content might squash on smaller devices or stretch on wider screens.
Responsive layouts not only scale with browsers but they also use media queries to adjust and rearrange the layout. This means that, for example, you can go from a three column layout on desktop, to a two column layout on tablet, to a single column layout on mobile.