sente · December 13, 2011 02:49
diff --git a/wireframe.html b/wireframe.html
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<meta name="language" content="en" />
 	<meta name="description" content="description goes here" /> <!-- no more than 160 characters -->
 	<meta name="keywords" content="keyword phrases, separated by commas and spaces" /> <!-- no more than 12 keyword sets -->
 	<title>CSS Wireframe</title>
 	<style type="text/css">
 	/*Global*/
 	* {
 		border:none;
 		outline:0;
 		margin:0;
 		padding:0;
 		line-height:1;
 		font-weight:normal;
 		font-family:"Helvetica Neue",Arial,sans-serif;
 		font-size:13px;
 		}
 	body {
 		width:100%;
 		text-align:center;
 		background:#ccc;
 		}
 	a {
 		color:#086dae;
 		font-weight:bold;
 		}
 	.padding {
 		padding:20px;
 		}
 	.color {
 		background:#ddd;
 		}
 	p {
 		line-height:16px;
 		}
 	
 	/*Wrapper*/
 	#wrapper {
 		width:95%;
 		margin:0 auto;
 		text-align:left;
 		}
 	
 	/*Header*/
 	#header {
 		background:gray;
 		}
 		
 	/*Container*/
 	#container {
 		overflow:hidden;
 		}
 	
 	/*Sidebar*/
 	#sidebar {
 		float:left;
 		width:20%;
 		background:blue;
 		min-width:150px;
 		max-width:225px;
 		/*    not needed because word-wrap:break-word
                overflow:hidden;
                */
                word-wrap:break-word;
 		}
 	
 	/*Content*/
 	#content {
 		background:red;
 		overflow:hidden;
 		}
 		
 	/*Footer*/
 	#footer {
 		padding:20px;
 		clear:both;
 		background:green;
 		}
 	</style>
 </head>
 <body>
 	<div id="wrapper">
 		<div id="header">
 			<div class="padding">
 				<div class="color">
 					<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
 				</div>
 			</div>
 		</div>
 		<div id="container">
 			<div id="sidebar">
 				<div class="padding">
 					<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. Applesauceisdeliciousbecausemymmomsaysso.</p>
 				</div>
 			</div>
 			<div id="content">
 				<div class="padding">
 					<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
 					<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
 					<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
 					<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
 					<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
 					<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
 					<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
 					<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
 					<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
 				</div>
 			</div>
 		</div>
 		<div id="footer">
 			<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
 		</div>
 	</div>
 </body>
 </html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="language" content="en" />
	<meta name="description" content="description goes here" /> <!-- no more than 160 characters -->
	<meta name="keywords" content="keyword phrases, separated by commas and spaces" /> <!-- no more than 12 keyword sets -->
	<title>CSS Wireframe</title>
	<style type="text/css">
	/Global/
	* {
	border:none;
	outline:0;
	margin:0;
	padding:0;
	line-height:1;
	font-weight:normal;
	font-family:"Helvetica Neue",Arial,sans-serif;
	font-size:13px;
	}
	body {
	width:100%;
	text-align:center;
	background:#ccc;
	}
	a {
	color:#086dae;
	font-weight:bold;
	}
	.padding {
	padding:20px;
	}
	.color {
	background:#ddd;
	}
	p {
	line-height:16px;
	}

	/Wrapper/
	#wrapper {
	width:95%;
	margin:0 auto;
	text-align:left;
	}

	/Header/
	#header {
	background:gray;
	}

	/Container/
	#container {
	overflow:hidden;
	}

	/Sidebar/
	#sidebar {
	float:left;
	width:20%;
	background:blue;
	min-width:150px;
	max-width:225px;
	/* not needed because word-wrap:break-word
	overflow:hidden;
	*/
	word-wrap:break-word;
	}

	/Content/
	#content {
	background:red;
	overflow:hidden;
	}

	/Footer/
	#footer {
	padding:20px;
	clear:both;
	background:green;
	}
	</style>
	</head>
	<body>
	<div id="wrapper">
	<div id="header">
	<div class="padding">
	<div class="color">
	<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
	</div>
	</div>
	</div>
	<div id="container">
	<div id="sidebar">
	<div class="padding">
	<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. Applesauceisdeliciousbecausemymmomsaysso.</p>
	</div>
	</div>
	<div id="content">
	<div class="padding">
	<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
	<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
	<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
	<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
	<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
	<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
	<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
	<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
	<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
	</div>
	</div>
	</div>
	<div id="footer">
	<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
	</div>
	</div>
	</body>
	</html>