Full Width Layouts

Contact Us or call 1-877-932-8228
Full Width Layouts

Full Width Layouts

Pages designed to use the full width of the browser window are often described as having a "fluid" or "liquid" layout. That's because one or more of the columns must be automatically resized according to the size of the browser window.

Two-column

We'll start with the simple two-column layout shown below: Fluid Two Column

As you can see, the page has four content areas. Let's take a look at the HTML first:

Code Sample:

CssPageLayout/Demos/fluid-two-column.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link href="fluid-two-column.css" rel="stylesheet">
<title>Two-column fluid layout</title>
</head>
<body>
<div id="wrapper">
	<div id="header">
		<h1>Two-column fluid layout</h1>
	</div>
	<div id="main">
		<div id="menu">
			<h2>Menu</h2>
			<p>This column is fixed.</p>
			<p>This column is fixed.</p>
			<p>This column is fixed.</p>
			<p>This column is fixed.</p>
			<p>This column is fixed.</p>
		</div>
		<div id="content">
			<h2>Content</h2>
			<p>This column is fluid.</p>
		</div>
		<div class="clearer"></div>
	</div>
	<div id="footer">footer</div>
               </div>
</body>
</html>

Code Explanation

The four content areas have the following ids: header, footer, menu, and content. Note that we use HTML5 semantic tags here: <section> for the main section, <header> for the header, <nav> for the left-side navigation element, and <footer> for the footer.

The page content is contained in a wrapper div with id wrapper, which we can use to put a border around the content. Later we'll see how we can use it to adjust the width of the whole content. The wrapper div is divided into three "rows": header, main, and footer.

The main row is broken up into two "columns": menu and content. It also has a "clearer" div, which we'll discuss shortly.

Now the CSS:

Code Sample:

CssPageLayout/Demos/fluid-two-column.css
* {
	margin:0;
	padding:0;
	border:0;
}
#wrapper {
	border: 1px solid #000;
}
#header {
	border-bottom: 1px solid #000;
	padding: 10px;
	background-color: #eee;
}
#main {
	background-image: url(Images/bgMain.gif);
	background-repeat: repeat-y;
}
#menu {
	width: 180px;
	float: left;
	padding: 10px;
	border-right: 1px solid #000;
	color: #fff;
}
#content {
	margin-left: 200px;
	border-left: 1px solid #000;
	padding: 10px;
	line-height: 2em;
}
.clearer {
	clear: both;
}
#footer {
	border-top: 1px solid #000;
	background-color: #eee;
	padding: 10px;
}

Code Explanation

  1. We'll start by resetting margins, padding, and borders with the universal selector:
    * {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    The result: Resulting Image
  2. Next let's add a border to the wrapper div:
    #wrapper {
    	border: 1px solid #000;
    }
    The result: Image with Border
  3. Next let's add a bottom border to the header and give it some padding and a background:
    #header {
    	border-bottom: 1px solid #000;
    	padding: 10px;
    	background-color: #eee;
    }
    The result: Bottom Border Added
  4. Next let's add a background image to the main section. The background image is 1px high by 200px wide. This is a trick to apply a background color to the left column that extends all the way to the bottom of the column. If we put the background image or a background color on the menu div itself, the background would end at the bottom of the content in that div. By putting it on the containing main div, we make sure that the background extends to the bottom of the whole column:
    #main {
    	background-image: url(Images/bgMain.gif);
    	background-repeat: repeat-y;
    }
    The result: Extended Background
  5. Now we need to float the menu nav left so that the content article will come up to its right edge. We'll also add some other styles to make it more readable and give it a width of 180px and padding of 10px, which gives it a total width of 200px: 180px + (2 x 10px):
    #menu {
    	width: 180px;
    	float: left;
    	padding: 10px;
    	border-right: 1px solid #000;
    	color: #fff;
    }
    The result: Fluid Two Column ImageWhat happened there??? The text in the content article is wrapping underneath the menu. We don't want that.
  6. And there's another problem - watch what happens when we shorten the text in the content article: Shortened ImageThe height of the main section only extends to the bottom of its content, which it considers to be the content article. So the background only tiles down that far.
  7. The solution to the wrapping problem is to set the left margin of the content div to the total width of the menu div:
    #content {
    	margin-left: 200px;
    	border-left: 1px solid #000;
    	padding: 10px;
    	line-height: 2em;
    }
    The result (Notice we added the content back to the content article): Resulting ImageThat looks good.
  8. But what happens when we remove content from the content article:Content RemovedThis is the same problem we mentioned earlier. The height of the main section only extends to the bottom of its content.
  9. This is where the clearer comes in. By putting the clearer div at the bottom of the main section, we force its height to extend:
    .clearer {
    	clear: both;
    }
    The result: Resulting ImageGood! We're almost there. And it even works when the content div grows: Content div Grows
  10. Now we just need to style the footer a little to visually separate it from the rest of the page:
    #footer {
    	border-top: 1px solid #000;
    	background-color: #eee;
    	padding: 10px;
    }
    The result: Resulting ImageAnd we're done. Phew.

Three-column

Let's see how we would add a third column with the right and left columns fixed and the center column fluid: Third Column Added

First the HTML:

Code Sample:

CssPageLayout/Demos/fluid-three-column.html
---- C O D E   O M I T T E D ----

<div id="wrapper">
	<header id="header">
		<h1>Three-column fluid layout</h1>
	</header>
	<section id="main">
		<div id="inner">
			<nav id="menu">
				<h2>Menu</h2>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
			</nav>
			<aside id="sidebar">
				<h2>Sidebar</h2>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
				<p>This column is fixed.</p>
			</aside>
			<article id="content">
				<h2>Content</h2>
				<p>This column is fluid. This column is fluid. 
---- C O D E   O M I T T E D ----
</p>
			</article>
			<div class="clearer"></div>
		</div>
	</section>
	<footer id="footer">footer</footer>
</div>
</body>
</html>

Code Explanation

Things to notice:

  1. We've added a sidebar as an <aside> tag. Notice the location: it comes before the content article even though it will show up to the right of it.
  2. We've added an inner div, which we will use to get the background on the right-hand column.

Now the CSS:

Code Sample:

CssPageLayout/Demos/fluid-three-column.css
---- C O D E   O M I T T E D ----

#inner {
	background-image: url(Images/bgMainInner.gif);
	background-position: right;
	background-repeat: repeat-y;
}
#menu {
	width: 180px;
	float: left;
	padding: 10px;
	color: #fff;
}
#sidebar {
	width: 160px;
	float: right;
	padding: 10px;
	color: #ded;
}
#content {
	margin-left: 200px;
	margin-right: 180px;
	padding: 10px;
	line-height: 2em;
}

---- C O D E   O M I T T E D ----

Code Explanation

  1. First, what we need to do is to float the sidebar to the right:
    #sidebar {
    	width: 160px;
    	float: right;
    	padding: 10px;
    	color: #ded;
    }
    The result: Sidebar Floated to the Right Notice how the content in the center flows under the sidebar.
  2. To fix that we need to give the content article a right margin equal to the total width of the sidebar aside (160px + 2*(10px)) = 180px:
    #content {
    	margin-left: 200px;
    	margin-right: 180px;
    	padding: 10px;
    	line-height: 2em;
    }
    The result: Right Margin Equal to Total Width
  3. Finally, to get the background, we use the same trick with our new inner wrapper div we used earlier. The only difference is we need to set the background-position to right so that it tiles along the right side of the browser:
    #inner {
    	background-image: url(Images/bgMainInner.gif);
    	background-position: right;
    	background-repeat: repeat-y;
    }
    The result: Resulting Image
Next