Dynamic Drive CSS Layouts- Liquid Layouts

Below are liquid layouts where the layout spans the entire page width wise, expanding and contracting as the page is resized.

Page 1 of 2 pages 1 2 >

CSS Liquid Layout #2.1- (Fixed-Fluid)

Liquid Layout type:

2 No. of columns:

Fixed Fluid Columns setup:

CSS Liquid Layout #2.2- (Fluid-Fixed)

Liquid Layout type:

2 No. of columns:

Fluid Fixed Columns setup:

CSS Liquid Layout #3.1- (Fixed-Fluid-Fixed)

Fixed Layout type:

3 No. of columns:

FixedFixed Fixed Columns setup:

CSS Liquid Layout #3.2- (Fluid-Fluid-Fixed)

Liquid Layout type:

3 No. of columns:

FluidFluid Fixed Columns setup:

CSS Liquid Layout #3.3- (Fluid-Fluid-Fluid)

Fluid Layout type:

3 No. of columns:

FluidFluid Fluid Columns setup:

CSS Liquid Layout #3.4- (Fluid-Fixed-Fixed)

Fluid Layout type:

3 No. of columns:

FluidFixed Fixed Columns setup:

CSS Liquid Layout #3.5- (Fluid-Fluid-Fixed)

Fluid Layout type:

3 No. of columns:

FluidFluid Fixed Columns setup:

CSS Liquid Layout #3.6- (Fluid-Fixed-Fluid)

Fluid Layout type:

3 No. of columns:

FluidFixed Fluid Columns setup:

CSS Liquid Layout #3.7- (Fixed-Fixed-Fluid)

Fluid Layout type:

3 No. of columns:

Fixed Fixed Fluid Columns setup:

CSS Liquid Layout #3.8- (Fluid-Fixed-Fluid)

Fluid Layout type:

3 No. of columns:

Fluid Fixed Fluid Columns setup:

Page 1 of 2 pages 1 2 >