Common Web Page Layouts in HTML and CSS

From Knowledge Kitchen
Jump to: navigation, search


This page contains example code that illustrates how to create some common web page layouts. All layouts here are for fixed-width pages, however, the same concepts and techniques apply to fluid or dynamic-width, and so-called "responsive" layouts.


Simple regular header, footer, content layout

This HTML and CSS code will produce a boring regular page layout with simply a header, a footer, and main content area, in addition to the following features:

  • fixed width page
  • centered within the browser window
Layout with header, footer, and content area

HTML

 <!doctype html>
 <html>
 	<head>
 		<link href="css/boring_regular_vertical_layout.css" type=" text/css" rel="stylesheet" />
 		<title>Boring Regular Layout</title >
 	</head>
 	<body>
 		<div id="wrapper">
 			<header>
 				Header goes here
 			</header>
 			<article>
 				Main content goes here
 			</article>
 			<footer>
 				Footer goes here
 			</footer>
 		</div>
 	</body>
 </html>


CSS

div#wrapper {
	/* all page content is surrounded in an HTML div tag with the id="wrapper"
	background-color: fuchsia;
	padding: 10px;

	/* make the page smaller than the common browser width */
	width: 960px;

	/* center this div in the browser by applying equal margins on left and right*/
	margin-left: auto;
	margin-right: auto;
}
header {
	background-color: blue;
}

article {
	background-color: purple;
}

footer {
	background-color: red;
} 


Left nav or "C"-clamp layout

The following code will produce a web page layout that has a header, footer, a left nav area that sits to the side of the main content area. The header, left nav, and footer produce a layout that looks like the letter "c", or like a clamp. This layout is therefore affectionately referred to as the "C-clamp" layout, where the main content area is between the grips of the clamp.

Left nav or c-clamp layout

HTML

 <!doctype html>
 <html>
 	<head>
 		<link rel="stylesheet" type="text/css" href= "css/c_clamp_layout.css" />
 		<title>Basic C-Clamp Layout</title>
 	</head>
 	<body>
 		<div id="wrapper">
 			
 			<header>
 				header goes here
 			</header>
 
 			<nav>
 				left nav goes here
 			</nav>
 
 			<section>
 				main content goes here
 			</section>
 
                        <!-- clearfix hack - this is necessary after  any set of elements that  have the float property set  -->
 			<div class="clear"></div>
 
 			<footer>
 				footer goes here
 			</footer>
 
 		</div>
 	</body>
 </html>

CSS

div#wrapper {
	background-color: fuchsia;
	padding: 10px;

	/* make the page smaller than the common browser width */
	width: 960px;

	/* center this div in the browser */
	margin-left: auto;
	margin-right: auto;
}

div.clear {
       /* clearfix hack */
       clear: both;
}

header {
	background-color: blue;
}

nav {
	background-color: yellow;
	width: 320px;
	float: left;
}

section {
	background-color: purple;
	width: 640px;
	float: left;
}

footer {
	background-color: red;
}

Right rail layout

Like the C-clamp layout, the right rail layout has a column that sits next to the main content area. In this case, it sits to the right of the main content area.

Right rail layout

HTML

 <!doctype html>
 <html>
 	<head>
 		<link rel="stylesheet" type="text/css" href= "css/right_rail_layout.css" />
 		<title>Right Rail Layout</title>
 	</head>
 	<body>
 		<div id="wrapper">
 			
 			<header>
 				header goes here
 			</header>
 
 			<section>
 				main content goes here
 			</section>
 
 			<aside>
 				right rail goes here
 			</aside>

                        <!-- clearfix hack - this is necessary after  any set of elements that  have the float property set  -->
 			<div class="clear"></div>
  
 			<footer>
 				footer goes here
 			</footer>
 
 		</div>
 	</body>
 </html>

CSS

div#wrapper {
	background-color: fuchsia;
	padding: 10px;

	/* make the page smaller than the common browser width */
	width: 960px;

	/* center this div in the browser */
	margin-left: auto;
	margin-right: auto;
}

div.clear {
       /* clearfix hack */
       clear: both;
}

header {
	background-color: blue;
}

aside {
	background-color: yellow;
	width: 320px;
	float: left;
}

section {
	background-color: purple;
	width: 640px;
	float: left;
}

footer {
	background-color: red;
}

"O" or "Cheerio" layout

This layout is a combination of the left nav and right rail layouts. In this type of layout, the header, footer, left nav, and right rail together produce an "O" shape, thereby earning the label, "O" or "Cheerio" layout.

O or cheerio layout

HTML

 <!doctype html>
 <html>
 	<head>
 		<link rel="stylesheet" type="text/css" href= "css/cheerio_layout.css" />
 		<title>Cheerio Layout</title>
 	</head>
 	<body>
 		<div id="wrapper">
 			
 			<header>
 				header goes here
 			</header>
 
 			<nav>
 				left nav goes here
 			</nav>
 
 			<section>
 				main content goes here
 			</section>
 
 			<aside>
 				right rail goes here
 			</aside>

                        <!-- clearfix hack - this is necessary after  any set of elements that  have the float property set  -->
 			<div class="clear"></div>
  
 			<footer>
 				footer goes here
 			</footer>
 
 		</div>
 	</body>
 </html>


CSS

div#wrapper {
	background-color: fuchsia;
	padding: 10px;

	/* make the page smaller than the common browser width */
	width: 960px;

	/* center this div in the browser */
	margin-left: auto;
	margin-right: auto;
}

div.clear {
       /* clearfix hack */
       clear: both;
}

header {
	background-color: blue;
}

nav {
	background-color: yellow;
	width: 320px;
	float: left;
}

aside {
	background-color: yellow;
	width: 320px;
	float: left;
}

section {
	background-color: purple;
	width: 320px;
	float: left;
}

footer {
	background-color: red;
}

Tiling layout

The following code will generate a web page with rectangular tile sections stacked up in an orderly grid.

Tiling layout

HTML

 <!doctype html>
 <html>
 	<head>
 		<link href="css/tiling_content_layout.css"  type="text/css" rel="stylesheet" />
 		<title>Tiling Layout</title >
 	</head>
 	<body>
 		<div id="wrapper">
 			<header>
 				Header goes here
 			</header>
 			<section>
 				<!-- here we are going to  add tiling boxes -->
 
 				<article>
 					<h1>Barcelona</h1 >
 					<h2>21  neighborhoods</h2 >
 				</article>
 
 				<article>
 					<h1>New York</h1 >
 					<h2>60  neighborhoods</h2 >
 				</article>
 
 				<article>
 					<h1>Seoul</h1>
 					<h2>21  neighborhoods</h2 >
 				</article>
 
 				<article>
 					<h1>Rio de Janeiro </h1>
 					<h2>21  neighborhoods</h2 >
 				</article>
 
 				<article>
 					<h1>Paris</h1>
 					<h2>21  neighborhoods</h2 >
 				</article>
 
 				<article>
 					<h1>San Francisco </h1>
 					<h2>21  neighborhoods</h2 >
 				</article>
 
 				<!-- clearfix hack - this is necessary after  any set of elements that  have the float property set  -->
 				<div class="clear"></div>
 
 			</section>
 
 			<footer>
 				Footer goes here
 			</footer>
 		</div>
 	</body>
 </html>

CSS

Place the following code in a CSS file named "tiling_content_layout.css" in a sub-folder called "css".

div#wrapper {
	background-color: fuchsia;
	padding: 10px;

	/* make the page smaller than the common browser width */
	width: 960px;

	/* center this div in the browser */
	margin-left: auto;
	margin-right: auto;
}

div.clear {
       /* clearfix hack */
	clear: both;
}

header {
	background-color: blue;
}

section {
	background-color: purple;
}

section article {
	background-color: yellow;
	width: 300px;
	height: 180px;
	float: left;
	background-image: url(../images/tapas.png);
	text-align: center;
	color: pink;
	padding-top: 20px;
	margin: 10px;
	cursor: pointer;
}

section article h2 {
	display: none;
}

section article:hover h2 {
	display: block;
}

footer {
	background-color: red;
} 

Images

The code in this example assumes you have an image named "tapas.png" stored in a folder named "images". Download the following image and place it in the proper folder.

Tapas.png

AirBnB-style layout

The following code imitates the layout of the layout of the search results page on the current Airbnb.com web site. The page consists of header and footer, and a map that sits beside a search results listing. The search results listing is independently scrollable.

HTML

 <!doctype html>
 <html>
 	<head>
 		<link rel="stylesheet" type="text/css" href= "css/airbnb_style_layout.css" />
 		<title>AirBnB-Style Layout</title>
 	</head>
 	<body>
 		<div id="wrapper">
 			
 			<header>
 				header goes here
 			</header>
 
 			<section id="map_section">
 				<img src="images/map.png"  />
 			</section>
 
 			<section id="listings_section">
 				
 				<h1>
 					Imagine this is a  bunch of AirBnB  listings
 				</h1>
 				
 				<p>
 					Lorem ipsum dolor  sit amet, consectetur  adipiscing elit.  Donec a diam lectus.  Sed sit amet ipsum  mauris. Maecenas  congue ligula ac  quam viverra nec  consectetur ante  hendrerit. Donec et  mollis dolor.  Praesent et diam  eget libero egestas  mattis sit amet vitae  augue. Nam  tincidunt congue  enim, ut porta lorem  lacinia consectetur.  Donec ut libero sed  arcu vehicula  ultricies a non  tortor. Lorem ipsum  dolor sit amet,  consectetur  adipiscing elit.  Aenean ut gravida  lorem. Ut turpis felis,  pulvinar a semper  sed, adipiscing id  dolor. Pellentesque  auctor nisi id magna  consequat sagittis.  Curabitur dapibus  enim sit amet elit  pharetra tincidunt  feugiat nisl  imperdiet. Ut  convallis libero in  urna ultrices  accumsan. Donec  sed odio eros. Donec  viverra mi quis quam  pulvinar at  malesuada arcu  rhoncus. Cum sociis  natoque penatibus et  magnis dis  parturient montes,  nascetur ridiculus  mus. In rutrum  accumsan ultricies.  Mauris vitae nisi at  sem facilisis semper  ac in est.
 				</p>
 
 				<p>
 					Vivamus fermentum  semper porta. Nunc  diam velit,  adipiscing ut  tristique vitae,  sagittis vel odio.  Maecenas convallis  ullamcorper ultricies.  Curabitur ornare,  ligula semper  consectetur sagittis,  nisi diam iaculis  velit, id fringilla sem  nunc vel mi. Nam  dictum, odio nec  pretium volutpat,  arcu ante placerat  erat, non tristique  elit urna et turpis.  Quisque mi metus,  ornare sit amet  fermentum et,  tincidunt et orci.  Fusce eget orci a orci  congue vestibulum.  Ut dolor diam,  elementum et  vestibulum eu,  porttitor vel elit.  Curabitur venenatis  pulvinar tellus  gravida ornare. Sed  et erat faucibus nunc  euismod ultricies ut  id justo. Nullam  cursus suscipit nisi,  et ultrices justo  sodales nec. Fusce  venenatis facilisis  lectus ac semper.  Aliquam at massa  ipsum. Quisque  bibendum purus  convallis nulla  ultrices ultricies.  Nullam aliquam, mi  eu aliquam  tincidunt, purus velit  laoreet tortor,  viverra pretium nisi  quam vitae mi. Fusce  vel volutpat elit.  Nam sagittis nisi dui.
 				</p>
 
 				<p>
 					Suspendisse lectus  leo, consectetur in  tempor sit amet,  placerat quis neque.  Etiam luctus  porttitor lorem, sed  suscipit est rutrum  non. Curabitur  lobortis nisl a enim  congue semper.  Aenean commodo  ultrices imperdiet.  Vestibulum ut justo  vel sapien venenatis  tincidunt. Phasellus  eget dolor sit amet  ipsum dapibus  condimentum vitae  quis lectus. Aliquam  ut massa in turpis  dapibus convallis.  Praesent elit lacus,  vestibulum at  malesuada et, ornare  et est. Ut augue  nunc, sodales ut  euismod non,  adipiscing vitae orci.  Mauris ut placerat  justo. Mauris in  ultricies enim.  Quisque nec est  eleifend nulla  ultrices egestas quis  ut quam. Donec  sollicitudin lectus a  mauris pulvinar id  aliquam urna cursus.  Cras quis ligula sem,  vel elementum mi.  Phasellus non  ullamcorper urna.
 				</p>
 				<p>
 					Class aptent taciti  sociosqu ad litora  torquent per conubia  nostra, per inceptos  himenaeos. In  euismod ultrices  facilisis. Vestibulum  porta sapien  adipiscing augue  congue id pretium  lectus molestie.  Proin quis dictum  nisl. Morbi id quam  sapien, sed  vestibulum sem.  Duis elementum  rutrum mauris sed  convallis. Proin  vestibulum magna  mi. Aenean tristique  hendrerit magna, ac  facilisis nulla  hendrerit ut. Sed non  tortor sodales quam  auctor elementum.  Donec hendrerit  nunc eget elit  pharetra pulvinar.  Suspendisse id  tempus tortor.  Aenean luctus, elit  commodo laoreet  commodo, justo nisi  consequat massa,  sed vulputate quam  urna quis eros.  Donec vel.
 				</p>
 				<p>
 					Suspendisse lectus  leo, consectetur in  tempor sit amet,  placerat quis neque.  Etiam luctus  porttitor lorem, sed  suscipit est rutrum  non. Curabitur  lobortis nisl a enim  congue semper.  Aenean commodo  ultrices imperdiet.  Vestibulum ut justo  vel sapien venenatis  tincidunt. Phasellus  eget dolor sit amet  ipsum dapibus  condimentum vitae  quis lectus. Aliquam  ut massa in turpis  dapibus convallis.  Praesent elit lacus,  vestibulum at  malesuada et, ornare  et est. Ut augue  nunc, sodales ut  euismod non,  adipiscing vitae orci.  Mauris ut placerat  justo. Mauris in  ultricies enim.  Quisque nec est  eleifend nulla  ultrices egestas quis  ut quam. Donec  sollicitudin lectus a  mauris pulvinar id  aliquam urna cursus.  Cras quis ligula sem,  vel elementum mi.  Phasellus non  ullamcorper urna.
 				</p>
 				<p>
 					Class aptent taciti  sociosqu ad litora  torquent per conubia  nostra, per inceptos  himenaeos. In  euismod ultrices  facilisis. Vestibulum  porta sapien  adipiscing augue  congue id pretium  lectus molestie.  Proin quis dictum  nisl. Morbi id quam  sapien, sed  vestibulum sem.  Duis elementum  rutrum mauris sed  convallis. Proin  vestibulum magna  mi. Aenean tristique  hendrerit magna, ac  facilisis nulla  hendrerit ut. Sed non  tortor sodales quam  auctor elementum.  Donec hendrerit  nunc eget elit  pharetra pulvinar.  Suspendisse id  tempus tortor.  Aenean luctus, elit  commodo laoreet  commodo, justo nisi  consequat massa,  sed vulputate quam  urna quis eros.  Donec vel.
 				</p>
 			</section>
 
 			<footer>
 				footer goes here
 			</footer>
 
 		</div>
 	</body>
 </html>

CSS

Place the following code in a CSS file named "airbnb_style_layout.css" in a sub-folder called "css".

div#wrapper {
	background-color: fuchsia;
	padding: 10px;

	/* make the page smaller than the common browser width */
	width: 960px;

	/* center this div in the browser */
	margin-left: auto;
	margin-right: auto;
}
header {
	background-color: blue;
}

section#map_section {
	background-color: yellow;
	width: 320px;
	float: left;
}

section#listings_section {
	background-color: purple;
	width: 640px;
	float: left;

	/* give it a height, so it needs scrolling */
	height: 600px;

	/* indicate what to do if the content inside this element is too tall for this element's height */
	overflow: auto;
}

section#listings_section h1 {
	text-align: center;
	color: white;
}

section#listings_section p {
	padding-left: 20px;
	padding-right: 20px;
}


footer {
	background-color: red;
} 

Images

The code in this example assumes you have an image named "map.png" stored in a folder named "images". Download the following image and place it in the proper folder.

Map.png


What links here