CSS Layouts, Fixed Vs Fluid

CSS Fixed layouts are layouts with fixed width in px or em, exp 960px, 1200px, 1170px, 1320px etc. The width of layout is fixed, that's why its called fixed layout.

CSS Fluid Layouts or Elastic layouts are layouts with width in percentage or vw or auto.

Difference between fixed and Fluid layouts.

Property Fixed Layout Liquid Layout
Width of wrap In Pixels ( 960px, 1200px). In Percentage or auto, for exp 80%
Height in Pixels or auto. Automatic
Device Compatibility For devices greater than their width. Remain Same. Do not compress
Text Scrolling on various Devices Remain same Text scroll down
Print Friendly Yes No
fixed

Fixed Layout

Fixed Layout is a layout in which the width of main container is fixed ( in pixels). Popular Fixed width layouts are 1200px and 960px (used earlier).

Properties of Fixed Layout

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

Fixed layout Example

<style>
*{
	margin:0;
    box-sizing:border-box;
}
.container{ 
	width:1200px;    
	margin:auto;    
}
header{
    padding:10px;
    background:aqua;
}
nav{
    padding:10px;
    background:gray;
}
main{
    display:flex;
}
aside{
    background:pink;
    flex: 1 0 25%;
    padding:10px;
}
section{
    background:yellow;
    flex: 1 0 75%;
    padding:10px;
}
footer{
    padding:10px;
    background:#333;
    color:#fff;
}

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