Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Liquid Layout in CSS
As the name suggests, the meaning of the liquid layout is flooding layout. It changes the dimensions of the HTML elements according to the screen dimensions.
Whenever we use the hard-coded dimension values for HTML elements, it creates a fixed layout with a 90% chance of overflow. So, it is best practice to use a liquid layout so the web can be compatible with every device.
In this tutorial, we will learn to create a liquid layout using CSS.
Syntax
Users can follow the syntax below to create a liquid layout in CSS.
Selector_1 {
Width: 60%;
}
Selector_2{
Width: 40%;
}
In the above syntax, we have given 60% width to the first HTML element and 40% width to the second HTML element. Now, it will show the dimensions of the elements according to the screen width.
Example 1 (Pure Liquid Layout)
The example below defines the main div element, containing the part1 and part2 div elements. The part1 contains text, and part2 contains images. Here, we have given 70% width to part 1 and 24% width to part2. Also, we have given margin-right to part1. So, developers should give margins and paddings in percentage.
In the output, users can observe how div elements change their dimensions according to the screen width.
<html>
<head>
<style>
.main {
width: 100%;
height: auto;
}
.part1 {
width: 70%;
height: auto;
float: left;
background-color: #f1f1f1;
margin-right: 3%;
border: 2px solid green;
}
.part2 {
width: 18.25%;
height: auto;
float: left;
background-color: #ccc;
border: 2px solid red;
}
</style>
</head>
<body>
<h2> Using the Liquid layout for the web page </h2>
<div class = "main">
<div class = "part1">
TutorialsPoint is a great website for online learning of different programming languages. It provides a very good platform for beginners to learn different languages. Also, it provides blogs and video tutorials for a better understanding of the concepts and practical knowledge of the languages.
</div>
<div class = "part2">
<img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcReu-Tm0Iy01TPY9o-jDlMehh7S1mZc4q4D85j-4Dw&s"
alt = "logo">
</div>
</div>
</body>
</html>
Example 2 (Responsive Liquid Layout)
In the example below, we created the responsive liquid layout. The problem in the first example is that content becomes squished for smaller screen devices such as mobile devices. So, we require to make a responsive liquid layout.
Here, we added two div inside a main div element. Also, we have given dynamic width to both image elements. Also, we have used the media query to change the flex direction of images when the screen size becomes smaller than 716 pixels. So users can see the proper images on smaller screens.
<html>
<head>
<style>
.main { width: 100%;height: auto; display: flex; }
.image1 { width: 47%; height: auto; margin-right: 4%; }
.image2 { width: 47%; height: auto;}
img {width: 100%; height: auto;}
@media only screen and (max-width: 716px) {
.main { flex-direction: column; }
.image1 {
margin-right: 0;
width: 90%;
margin: 0 auto;
margin-bottom: 20px;
}
.image2 { width: 90%; margin: 0 auto; }
}
</style>
</head>
<body>
<h2> Using the Liquid layout for web page </h2>
<div class = "main">
<div class = "image1"> <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8qEZ7q390IcYonOcGAzbHqlcGl1-IwEzLaSEY0gbv&s"
alt = "image 1"> </div>
<div class = "image2"> <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyBspFh9CM_UZT_yaPeVke8VdlzuVO3CStQzqnHX_l&s"
alt = "image 2"></div>
</div>
</body>
</html>
Example 3 (Fixed + Liquid Layout)
In the example below, we demonstrated to create a fixed and liquid layout together using CSS. Here also added text and images in the main div. After that, we gave the fixed width equal to 400px to image, and used the calc() method to give dynamic width to the text div element equal to the 100% - 400px.
In the output, users can observe the image's fixed width and variable text width for different screens.
<html>
<head>
<style>
.main { width: 100%; height: auto; display: flex;}
.image { width: 400px; height: auto; margin-left: 4%;}
.text {
width: calc(100% - 400px);
height: auto;
font-size: 2rem;
color: green;
}
img { width: 100%; height: 100%; }
</style>
</head>
<body>
<h2> Creating the Fixed + Liquid layout for the web page </h2>
<div class = "main">
<div class = "text">
This is a nature image. Do you like it? Change the size of the web page and observe that image has a fix dimensions.
</div>
<div class = "image"> <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyBspFh9CM_UZT_yaPeVke8VdlzuVO3CStQzqnHX_l&s" alt = "image 2"></div>
</div>
</body>
</html>
Example 4 (Liquid Layout in Table)
In this example, we added the liquid layout in a table using CSS. Here, we created a table using HTML elements. After that, we used the ‘table-layout’ CSS property with an ‘auto’ value to add a liquid layout. Users can change the size of the browser window and observe how its column width changes in the different screen sizes.
<html>
<head>
<style>
.liquid-layout {width: 100%; table-layout: auto; border-collapse: collapse; }
.liquid-layout td { padding: 10px; border: 1px solid #ccc; text-align: center;}
</style>
</head>
<body>
<h2> Creating the table with Liquid layout for web page </h2>
<table class = "liquid-layout">
<tr>
<td> Country </td>
<td> Population </td>
<td> Language </td>
<td> Continent </td>
</tr>
<tr>
<td> India </td>
<td> 1.3 billion </td>
<td> Hindi </td>
<td> Asia </td>
</tr>
<tr>
<td> USA </td>
<td> 330 million</td>
<td> English </td>
<td> North America </td>
</tr>
<tr>
<td> UK </td>
<td> 67 million </td>
<td> English </td>
<td> Europe </td>
</tr>
</table>
</body>
</html>
Conclusion
We learned to create liquid layouts using CSS. We have seen four examples of adding liquid layouts in different HTML elements. In the first example, we added a pure liquid layout. In the second example, we added a responsive liquid layout. In the third example, we learned to create fixed and liquid layouts together; in the last example, we added liquid layouts to the table.
727 Views
