Fixed and Liquid Layouts in CSS

In css2, we can create two types of layouts, Fixed and Liquid. CSS Fixed layouts are layouts with fixed width in px or em. like 960px, 1200px, 1170px, etc. CSS Liquid Layouts are layouts with width in percentage or auto.

Difference between fixed and liquid layouts.

PropertyFixed LayoutLiquid Layout
Width of wrapin Pixels ( 960px, 1200px).In Percentage or auto, for exp 80%
Heightin Pixels or auto.Automatic
Device CompatibilityRemain Same, but compress.Remain Same. Do not compress
Text Scrolling on various DevicesRemain sameText scroll down
Print FriendlyYesNo

Fixed Layout

Fixed Layout is a layout in which the width of main container is fixed ( in pixels).

Properties of Fixed Layout

  • Fixed width in pixels.
  • Text doesn't scroll down when zoom in or zoom out
  • Independent of screen size.
  • Horizontal Scroll will come when screen size is less than width of main container.

Create Fixed layout.



<style>
*{
	margin:0px;
	padding:0px;
}
.wrap{ 
	width:960px;    /* Width will remain in pixels*/
	height:auto;
	margin:auto;    /* To set content in center*/
}
.header{
	height:150px;
	background:aqua;
}
.nav{
	height:50px;
	background:gray;
}
.container{
	background:white;
}
.aside{
	height:400px;
	background:pink;
	float:left;
}
.section{
	height:560px;
	background:yellow;
	float:left;
}
.footer{
	height:100px;
	background:#333;
}
.clear{
	clear:both;
}
</style>

	<div class="wrap">
		<div class="header">This is header</div>
		<div class="nav">This is navigation menu</div>
		<div class="container">
			<div class="aside">this is left section</div>
			<div class="section">this is right section</div>
			<div class="clear"></div>
		</div>
		<div class="footer">this is footer</div>
	</div>
</div>

						
Click here to see example of fixed Layout

Liquid Layout:

Liquid Layout is a layout in which the width of main container is flexible( in percentage). Whatever the screen-size is, the layout will remain same.

Properties of Liquid Layout

  • Width is in percentage.
  • Text scroll down when zoom in or zoom out
  • Dependent of screen size.
  • Horizontal Scroll will Never come on any screen unless any fixed content is inside.

Create Liquid Layout



<style>
*{
	margin:0px;
	padding:0px;
}
.wrap{ 
	width:90%;       /* Width will remain in percentage*/
	height:auto;
	margin:auto;     /* To set content in center*/
}
.header{
	height:auto;
	background:aqua;
}
.nav{
	height:50px;
	background:gray;
}
.container{
	background:white;
}
.aside{
	width:25%;    /* Aside will be 25% of parent*/
	background:pink;
	float:left;
}
.section{
	width:75%;   /* Section will be 75% of parent*/
	background:yellow;
	float:left;
}
.footer{
	height:100px;
	background:#333;
}
.clear{
	clear:both;
}
</style>

	<div class="wrap">
		<div class="header">This is header</div>
		<div class="nav">This is navigation menu</div>
		<div class="container">
			<div class="aside">this is left section</div>
			<div class="section">this is right section</div>
			<div class="clear"></div>
		</div>
		<div class="footer">this is footer</div>
	</div>
</div>

						
Click here to see example of Liquid Layout