Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Liquid Layout in CSS
As the name suggests, a liquid layout is a flexible web design approach that adapts HTML element dimensions according to screen size. Unlike fixed layouts that use hardcoded pixel values, liquid layouts use percentage-based widths to create fluid, responsive designs.
Liquid layouts prevent content overflow issues and ensure compatibility across different devices and screen sizes. They are essential for modern responsive web design.
Syntax
selector {
width: percentage%;
max-width: value; /* optional */
min-width: value; /* optional */
}
Example 1: Pure Liquid Layout
This example demonstrates a basic liquid layout with two columns using percentage widths
<!DOCTYPE html>
<html>
<head>
<style>
.main {
width: 100%;
height: auto;
overflow: hidden;
}
.part1 {
width: 70%;
height: auto;
float: left;
background-color: #f1f1f1;
margin-right: 3%;
border: 2px solid green;
padding: 15px;
box-sizing: border-box;
}
.part2 {
width: 25%;
height: auto;
float: left;
background-color: #ccc;
border: 2px solid red;
padding: 10px;
box-sizing: border-box;
text-align: center;
}
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Using Liquid Layout for Web Page</h2>
<div class="main">
<div class="part1">
TutorialsPoint is a great website for online learning of different programming languages. It provides an excellent platform for beginners to learn various technologies with practical examples and comprehensive tutorials.
</div>
<div class="part2">
<img src="/css/images/logo.png" alt="Logo">
</div>
</div>
</body>
</html>
Two columns appear side by side - a larger left column (70%) with text content and green border, and a smaller right column (25%) with an image and red border. Both columns resize proportionally when the browser window changes.
Example 2: Responsive Liquid Layout with Flexbox
This example creates a responsive liquid layout using flexbox and media queries
<!DOCTYPE html>
<html>
<head>
<style>
.main {
width: 100%;
display: flex;
gap: 4%;
}
.image1, .image2 {
width: 48%;
height: auto;
}
img {
width: 100%;
height: auto;
border-radius: 8px;
}
@media only screen and (max-width: 768px) {
.main {
flex-direction: column;
gap: 20px;
}
.image1, .image2 {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Responsive Liquid Layout</h2>
<div class="main">
<div class="image1">
<img src="/css/images/nature1.jpg" alt="Nature Image 1">
</div>
<div class="image2">
<img src="/css/images/nature2.jpg" alt="Nature Image 2">
</div>
</div>
</body>
</html>
Two images display side by side on larger screens (48% width each). On screens smaller than 768px, images stack vertically at 100% width each, creating a responsive layout.
Example 3: Fixed + Liquid Layout
This example combines fixed and liquid elements using the CSS calc() function
<!DOCTYPE html>
<html>
<head>
<style>
.main {
width: 100%;
height: auto;
display: flex;
gap: 20px;
}
.text {
width: calc(100% - 320px);
height: auto;
font-size: 1.2rem;
color: #333;
padding: 20px;
background-color: #f9f9f9;
border-left: 4px solid green;
}
.image {
width: 300px;
height: auto;
flex-shrink: 0;
}
img {
width: 100%;
height: auto;
border-radius: 8px;
}
</style>
</head>
<body>
<h2>Fixed + Liquid Layout</h2>
<div class="main">
<div class="text">
This layout combines fixed and liquid elements. The image has a fixed width of 300px, while the text area uses the remaining space with calc(100% - 320px). This ensures the image maintains consistent dimensions while the text area adapts to different screen sizes.
</div>
<div class="image">
<img src="/css/images/landscape.jpg" alt="Landscape">
</div>
</div>
</body>
</html>
A layout with text content taking up the flexible remaining space and an image maintaining a fixed 300px width. The text area expands and contracts based on screen size while the image stays consistent.
Example 4: Liquid Layout Table
This example demonstrates liquid layout principles applied to HTML tables
<!DOCTYPE html>
<html>
<head>
<style>
.liquid-table {
width: 100%;
table-layout: auto;
border-collapse: collapse;
margin: 20px 0;
}
.liquid-table th,
.liquid-table td {
padding: 12px;
border: 1px solid #ddd;
text-align: left;
}
.liquid-table th {
background-color: #f4f4f4;
font-weight: bold;
}
.liquid-table tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h2>Liquid Layout Table</h2>
<table class="liquid-table">
<thead>
<tr>
<th>Country</th>
<th>Population</th>
<th>Language</th>
<th>Continent</th>
</tr>
</thead>
<tbody>
<tr>
<td>India</td>
<td>1.3 billion</td>
<td>Hindi</td>
<td>Asia</td>
</tr>
<tr>
<td>United States</td>
<td>330 million</td>
<td>English</td>
<td>North America</td>
</tr>
<tr>
<td>United Kingdom</td>
<td>67 million</td>
<td>English</td>
<td>Europe</td>
</tr>
</tbody>
</table>
</body>
</html>
A responsive table that adjusts its column widths based on content and available screen space. The table maintains readability across different screen sizes with alternating row colors and proper spacing.
Conclusion
Liquid layouts provide flexible, responsive designs that adapt to different screen sizes using percentage-based widths. They can be pure liquid, combined with fixed elements, or enhanced with media queries for optimal responsiveness across all devices.
Updated on: 2026-03-15T17:22:01+05:30
2K+ Views
Advertisements