Till css2, we can build two types of layouts, Fixed and Fluid. These layouts are classified as Fixed or Fluid on the basics of their width. Body width is always 100% of screen and depends on screen resolution, but layout width can be changed to fixed or fluidic. The most popular resolution for desktop is 1366*768.

CSS Layouts Types


CSS Layouts, Fixed Vs Fluid

CSS Fixed layouts are layouts with fixed width in px or em, exp 1200px, 1170px, 1320px, 960px, 80rem 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.

PropertyFixed LayoutLiquid Layout
Width of wrapIn Pixels or em/remIn Percentage or auto, for exp 80%
Heightin Pixels or auto.Automatic
Device CompatibilityFor devices greater than their width.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). 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>

Fluid or Elastic or Liquid Layout:

Liquid Layouts 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 Fluid 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.

Fluid Layout Example

<style>
    <style>
    *{
        margin:0;
        box-sizing:border-box;
    }
    .container{ 
        width:80%;    
        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>