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](https://vcallc.us/wp-content/uploads/2022/09/fixed.jpg)
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>