Welcome Guest! (App Version 3.1)

websitnero logo name

Fluid Web Design

How to make fluid web design?

Fluid Web Designing is based on Liquid Layouts, which means that the layouts or divs or paragraphs are do not have hardcoded widths and heights. All the measurement wherever required is done Not in Pixels but all dimensions are defined in Percentages. This in turn provides better malleability and fluidity. Now, what will happen is that, as the width of screen changes, (say a user who was looking your website in laptop, turns on his mobile and watches same website now in much lesser width) the width of individual elements also change. As, this is now not a 960px or 1080px fixed layout, everything flows down if cannot be adjusted in same row.

Though, at certain stage you will need to apply Min-Width as property of certain elements to avoid too much squeezing of individual elements providing bad impression to the user.

Example

<head>
<style>
*{margin:0px;padding:0px;}
p{display:inline-block;}
.p1{background:yellow;width:20%;}
.p2{background:green;width:60%;}
.p3{background:red;width:20%;}
</style> 
</head>

<body> 
  <p class="p1">This is paragraph 1.</p>
  <p class="p2">This is paragraph 2.</p>
  <p class="p3">This is paragraph 3.</p>
</body> 
WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.