2 and 3 Column Fluid Layouts

A page layout is said to be fluid (or liquid) if it resizes proportionally when the browser window resizes; the area and columns within the page gets narrower or wider to fill the space. Liquid layouts are the keystones of responsive web design.

In fluid design, the widths of elements (especially block semantic elements which form the columns) are set to percentage (%) values.

We will start with a simple two-column fluid layout.

2-Column Fluid Layout

In our markup, there are the usual <header/> and <footer/> elements. And between them, there are the #main and <aside/> elements.

The #main element forms the larger left column and its width is set to 60% while <aside/> element forms the right column and is set to 25% width. Together they add upto 85%. But there are margins between them. As illustrated in the diagram below, there are three margin columns which are of 5% width each. The #main element has a margin of 5% applied on its left and right sides. The <aside/> element needs the margin of 5% applied only on its right. Altogether, columns and margins, add upto 100%.

Here is the markup for the two-column fluid layout. 

					
					<html>
						<body>
							<header>HEADER</header>
							<section id="main">MAIN</section>
							<aside>EXTRA</aside>
							<footer>FOOTER</footer>
						</body>
					</html>

The corresponding styles are as follows: 

					
					#main {
						float: left;
						margin: 0 5%;
						width: 60%;					
					}
					aside {
						float: left;
						margin: 0 5% 0 0;
						width: 5%;				
					}
					footer {
						clear: left;
					}

The #main and <aside/> elements are floated to the left. The <footer/> element is cleared to its left, so that it begins below the preceding floated <aside/> element.

3-Column Fluid Layout

For a 3-column layout, we add one more <aside/> element as the first column, just before the #main element. It is assigned an id="menu". Also we assign an id="notes" to the previously unassigned <aside/> element just below the #main element.

The markup for this 3-column fluid layout is as follows. 

					
					<html>
						<body>
							<header>HEADER</header>
							<aside id="menu">MENU</aside>
							<section id="main">MAIN</section>
							<aside id="notes">EXTRA</aside>
							<footer>FOOTER</footer>
						</body>
					</html>

Here also, all the elements (except the <header/> and the <footer/>) are floated to the left. The margin columns are of width 2.5% each, and there are four of them. The two <aside/> elements are each of width 22.5%. The #main element is of width 45%. The total measurements of the width and margin equals 100%. The footer is cleared to keep it at the bottom of the page. 

					
					#menu {
						float: left;
						margin: 0 0 0 2.5%;
						width: 22.5%;				
					}
					#main {
						float: left;
						margin: 0 2.5%;
						width: 45%;					
					}
					#notes {
						float: left;
						margin: 0 2.5% 0 0;
						width: 22.5%;				
					}
					footer {
						clear: left;
					}

Notes

  • The line-length property can become extra long on big screens, and thus could deter the reader.