Ojambo CSS Fluid Liquid Layout

CSS Fluid Liquid Layout

CSS Fluid Layout Using Percent Units

Fluid layouts automatically adapt to the width of the browser window. Both small and large screens contents fit inside set widths. As of Spring 2013, all current browsers support the max-width and min-width CSS properties.

The white space automatically adjusts as a ratio of the window width. Large screens can use the max-width property to keep content readable. Small screens can use the min-width property to keep the layout sane.

This tutorial uses HTML5.

Text editor.
Folder for web server.
Browser to view output.

CSS_Fluid_Liquid_Layout.html File

<!--
   CSS_Fluid_Liquid_Layout.html
   
   Copyright 2013 edward <http://Ojambo.com>
   
   This program is free software; you can redistribute it and/or modify
   it under the terms of the GNU General Public License as published by
   the Free Software Foundation; either version 2 of the License, or
   (at your option) any later version.
   
   This program is distributed in the hope that it will be useful,
   but WITHOUT ANY WARRANTY; without even the implied warranty of
   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
   GNU General Public License for more details.
   
   You should have received a copy of the GNU General Public License
   along with this program; if not, write to the Free Software
   Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
   MA 02110-1301, USA.
   
   
-->

<!DOCTYPE html>
<html xml:lang="en" lang="en">

<head>
	<title>Ojambo.com Fluid Liquid Layout</title>
	<meta charset="utf-8" />
	<style type="text/css">
		body { 
			font-size: 100%; 
			}
		#container { 
			max-width: 75%; 
			margin: 0 auto; 
			}
		#content {
			float:left;
			width:67%;
			}
		#sidebar {
			float:left;
			width:33%;
			}
		#footer {
			clear:both;
			}	
	</style>
</head>

<body>
	<div id="container">
		<div id="header">
			<p>Header</p>
		</div>
		<div id="content">
			<p>Main content</p>
		</div>
		<div id="sidebar">
			<p>Sidebar</p>
		</div>
		<div id="footer">
			<p>Footer</p>
		</div>
	</div>	
</body>

</html>

The body contents are set to 100% which is the default font size. The container element is given a maximum width to minimize white space on large screens. The content automatically re-sizes to fit both small and large widths.

How to Use:

Make browser window smaller.
Maker browser window larger.

Demonstration:

Ojambo.com CSS Fluid Layout Tutorial

Image Missing — Ojambo.com CSS Fluid Layout Small Resize

Conclusion:

As of Spring 2013, all modern browsers support the max-width and min-width CSS properties. On larger screens, max-width is used to keep content in the middle. CSS fluid layouts can automatically re-size content based on the browser’s window width.

CSS fluid layouts can be used today to accommodate both small and large screen sizes. One hundred percent width (100 %) is the equivalent of the parent element width.

Do not assume everyone will view the website using the full width of the screen.
Test your layout on both small and large screens.
Keep layouts readable on large screens by using the max-width property.
Keep layouts manageable on small screens by using the min-width property.

Ojambo.com CSS Elastic Layout.

Tags: CSS, Fluid, Layout, Liquid

This entry was posted on Wednesday, May 29th, 2013 at 12:00 am and is filed under Tips & Tricks. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.