A Two-column Fixed-Width Floated-column Layout (Exercise 19)

This is a two-column fixed-width Floated column layout, centered in the browser window. This is one method of centering a layout.

Web designers like this kind of layout because it gives them more control over the presentation of information.

The css for this layout looks like this:

body {	text-align:center;
		min-width: 760px;
		background-color:#996;
		margin:0;padding:0;
		}
#container { width:720px;
		margin:0 auto;padding:0;
		text-align:left;
		background-color:#ffc;
		}
#banner {width:auto;
		background-color:#ccc;
		height:70px; margin:0; padding:0;
}
#banner h1 {padding:10px 0 0 0;
		margin:10px 0 0 20px;
		font-size:130%;
		color:#0099CC;
}

#mainContent {	width:520px;
		float:right;
		background-color:#fff;
		margin:0; padding:0;
}
#mainNav {	width:180px;
		float:left;
		background-color:#ffc;
		margin:0; padding:0;
		line-height:normal;
}
#footer {	clear:both;
		margin:0;padding:0;
		border-top:1px solid #333;
		background-color:#fff;
}

CSS filename: two-columnfixed.css