Box Model Blues

The rudimentary web layout on this page reflows to fit the visitor’s browser window. Such pages are said to have “liquid” layouts. It is easy to create liquid layouts using frames or tables but can be difficult to do so in CSS. This page is liquid and fills 100% of the width of the visitor’s screen. Once we padding and borders to make it less ugly and more legible, all heck will break loose.

This is the maintext section. Its width is supposed to be 65% of the visitor’s browser window. Its height is supposed to be 100%. But its background color doesn’t fill the page.

#maintext	{
	width: 65%;
	height: 100%;
	color: #000;
	background: #fff;
	margin: 0;
	padding: 0;
	border-top: 10px solid #e0861e;
	float: right;
	}

Until the 6.0 version was released, Internet Explorer/Win got the CSS Box Model wrong. But IE’s broken box model was easier to use and more predictable than the actual CSS box model.

This is the navigation section. Its width is supposed to be 35% of the visitor’s browser window. Its height is supposed to be 100%. But its background color doesn’t fill the page.

#nav	{
	width: 35%;
	height: 100%;
	background: #666;
	color: #fff;
	margin: 0;
	padding: 0;
	border-top: 10px solid #95a580;
	}