Liquid Layout in CSS

Last Updated : 25 Aug, 2022

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

<!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:

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: