What is Fluid Layout?

For those who are not designers, the term “fluid layout” might sound a little intimidating. In reality, fluid layouts can be very easy to implement as well as beneficial for your website.

What are Fluid Layouts?

So what is it? Fluid layouts allow you to use percentage-based measurements instead of fixed units for width and height, so that they adapt automatically according to the size of the browser window. This means that if someone has a large screen on their laptop or desktop computer, they will see more content on one page than someone with an average screen size. Developers use it because it can create a better viewing experience for visitors by making text easier to read and images more visible.

When creating your own website layouts, you have the option to use either relative or absolute measurements in CSS.

• Relative measurements allow elements within the same container (or parent element) to resize themselves according to each other without affecting any other element’s size; therefore, using these measurements is a fluid design.
• Absolute measurements use pixels and are not responsive to the width of an element’s container, so they will never change size based on their context in the page or screen size.

Benefits of Fluid Layout

Fluid layout:

• Shows up well on any devices, from smart phones to desktops.
• Adapts easily to different screen sizes and resolutions.
• Is more readable with a wider range of content types (e.g., text or images).
• Prevents excessive whitespace when shrinking down layouts for small devices like smartphones or tablets
• Improves the readability on smaller screens
• Increases the amount of information that can be included in a layout without scrolling left and right, which is especially important for mobile devices
• Decreases whitespace when shrinking layouts down to small devices like smartphones or tablets. This will give you enough room to include all necessary content without scrolling back and forth

An example in CSS

<div class="wrapper">
	<div class="left">
	</div>
	<div class="right">
	</div>
</div>
<style type="text/css"> 
	.wrapper{
		width: 500px;
		margin: 100px auto;		
	}
	.left{
		background-color: red;
		width: 25%;
		height: 300px;
		float: left;
	}
	.right{
		background-color: orange;
		width: 75%;
		height: 300px;
	}
</style>