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.
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" />
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
< style >
body {
font-family: sans-serif;
line-height: 1.5;
padding: 0 16px;
}
article {
width: 66%;
float: left;
}
aside {
width: 33%;
float: right;
}
h1 {
margin-bottom: 0;
}
</ style >
< title >GeeksforGeeks</ title >
</ head >
< body >
< div style = "text-align: center;" >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
</ div >
< h2 >Liquid layout</ h2 >
< article >
< p >
In around the 1990s, During the early age
of web development, developers and designers
used fixed-width designs to design their websites.
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".
</ p >
< p >
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.
</ p >
</ article >
< aside >
< p >
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.
</ p >
< p >
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 site doesn't look good.
</ p >
</ aside >
</ body >
</ 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:
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: