Liquid layout
In this article we are going to learn about liquid layout in Cascading Style Sheets, how we can design a responsive web page that can change its size with different screen resolutions.
We learnt about css in general, padding, float, width, minimum width, maximum width, height, minimum height, maximum height, scroll, inline css, internal css, external css, selectors css, positions in css, display in css, lists style in css, multiple css and fixed layout in css so, we will be focusing on liquid layouts.
Liquid layout
Liquid layout is a Cascading Style Sheet layout that sets the size of any html element to be responsive, change its size with different screen sizes by using percentage (%) measurements, the size cannot change with different screen resolutions.
Let us create div element with responsive width of 60 percent, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.responsive-width-example {
width: 60%;
color: white;
background: orange;
}
<style/>
</head>
<body>
<div class="responsive-width-example">This is div element with 60% responsive width.</div>
</body>
</html>
So, we should have the following results and the width of this div element takes only 60% of the parent element width.
Let us create two div elements with responsive widths of 45 and 55 percent, copy and paste below code.
<!DOCTYPE html>
<head>
<style>
.45responsive-width-example {
width: 45%;
color: white;
background: orange;
float: left;
}
.55responsive-width-example {
width: 55%;
color: white;
background: orange;
float: right;
}
<style/>
</head>
<body>
<div class="45responsive-width-example">This is div element with 45% responsive width.</div>
<div class="55responsive-width-example">This is div element with 55% responsive width.</div>
</body>
</html>
So, we should have the following results and these div elements takes 100% of parent element width by adding 45% plus 55%.