O'Reilly logo

Web Site Cookbook by Doug Addison

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

3.1. Choosing Between a Flexible and Fixed Layout

Problem

You need to determine which design format will do the best job of presenting your web site's content for its audience.

Solution

Web designers have three basic options when creating a grid into which web site content can be arranged and presented: a fixed-width layout that locks page elements in place regardless of the browser window size; a flexible, or liquid, layout in which content blocks can be resized when the browser window size changes, and a hybrid layout that combines both fixed and flexible components.

Consider a hypothetical three-column web page that uses CSS-styled content blocks in <div>s for its layout. A fixed-width design specifies pixels for the three columns and their margins:

	<html>
	<head>
	…other head tags…
	<style type="text/css" title="text/css">
	<!--
	#column1 {
	 float: left;
	 width: 150px;
	 margin-left: 5px;
	 background-color: #CCCCCC; }
	#column2 {
	 float: left;
	 width: 390px;
	 margin-left: 5px;
	 background-color: #FFFFCC;}
	#column3 {
	 float: left;
	 width: 200px;
	 margin-left: 5px;
	 background-color: #CCCCCC; }
	-->
	</style>
	</head>
	<body>
	<div id="col1">…column 1 content…</div>
	<div id="col2">…column 2 content…</div>
	<div id="col3">…column 3 content…</div>
	</body>
	</html>

The code for a flexible layout looks the same, but uses a relative unit, such as percentages, rather than an absolute dimension.

	<html>
	<head>
	…other head tags…
	<style type="text/css" title="text/css">
	<!--
	#column1 {
	 float: left;
	 width: 20%; margin-left: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required