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: ...

Get Web Site Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial