代码改变世界

css layout/fluid03: 2 column left navigation

2012-08-31 20:21  youxin  阅读(218)  评论(0)  编辑  收藏  举报

demo;http://www.csseasy.com/layouts/fluid/2column_left.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>CSSeasy.com example page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/*
You are allowed to do whatever you want with this layout. Though I would be pleased if you placed a link on your site to csseasy.com or to profit42.com (best "blog about hacking" ever). Donations are also welcome: paypal@profit42.com (or follow the donation button on csseasy.com)
*/

body{ 
background-color:#dc8;
font-size:16px; 
margin:0; 
padding:0; 
}

#header{ 
background-color:#333;
height:150px;
}

#left{ 
float:left;
width:200px;
background-color:#dc8; 
min-height:650px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:650px; /* for IE5.x and IE6 */
}

#center { 
margin-left:200px;
background-color:#eec; 
min-height:650px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:650px; /* for IE5.x and IE6 */
}

#footer { 
clear:both;
background-color:#333;
height:100px;
}
</style>
</head>
<body>
<div id="header">
    </div>
<div id="left">
    </div>
<div id="center">
    </div>
<div id="footer">
    </div>
</body>
</html>