CSS Fixed And Liquid Layout | Fixed Vs Fluid Layout

Trang chủ » Html Fluid Layout Div » CSS Fixed And Liquid Layout | Fixed Vs Fluid Layout

Có thể bạn quan tâm

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>

Từ khóa » Html Fluid Layout Div