Fixed and Fluid Layouts

Updated on 14-Apr-2024

CSS Tutorial rating by Jasmine ⭑ ⭑ ⭑ ⭑ ⭑ Average rating: 5.0, based on 69 reviews

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.

Property	Fixed Layout	Liquid Layout
Width of wrap	In Pixels or em/rem	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 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>