In css, we can create two types of layouts, Fixed and Liquid.

Difference between fixed and liquid layouts.

PropertyFixed LayoutLiquid Layout
Width of wrapin Pixels ( approx 960px).In Percentage, for exp 80%
Heightin Pixels.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

Create a Fixed layout

Create Fixed layout.

<html>
<head>
<title>CSS Fixed Layout</title>
<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>
<head>
<body>
	<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>
</body>
</html>
						
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

Create a Liquid Layout

Create Liquid Layout

<html>
<head>
<title>CSS Fixed Layout</title>
<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>
<head>
<body>
	<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>
</body>
</html>
						
Click here to see example of Liquid Layout

Rate this Article


90%