Liquid Layout in CSS
During the early age of web development, developers and designers used fixed-width designs to design their website which only looks good in one specified width. While most developers were using fixed-width design, some were also using a technique called “Liquid Layout”.
The liquid layout means: Instead of using a fixed width for your layouts you could make a flexible layout using percentages for your column width.
This layout which we define with percentages instead of fixed pixels works in more situations than fixed-width design. But the Liquid layout also has a weakness, while it will look good on a wide variety of screens but it will not look good on very large screens or on very small screens.
On a very large screen, our website’s content will look stretched and on a very small screen, our website’s content will look squashed. And in both situations, the website does not look good.
Example: The below image and its code will show you the use of percentages instead of fixed pixels or you can say it’s a liquid layout.
HTML
Output:
You can see that the above page looks good at this width, but if we increase the screen width to a very large size then the content will look stretched. As you can see below the image.
Output:
Stretched looking webpage
If we make the screen width very small, then also you would not like the arrangement of the content. The content of the page will look squashed. The below image will show you how it looks.
Output:
Squashed looking webpage
Please Login to comment...