css笔记二:布局,左侧固定,右侧自适应

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>左侧固定宽度,右侧自适应,并且固定最小像素 </title>

<style type="text/css">

	body {font-size:14px; margin:0;}

	#container { margin:0 auto; width:100%;}

	#mainContent { height:500px;  margin-bottom:5px;}

	#sidebar {  float:left; width:200px; height:500px; background:#cf9;}

	#content {

		margin-left:205px !important;

		margin-left:202px;

		width:expression_r(document.body.clientWidth <= 600? "600px": "auto" );

		min-width:600px;

		height:500px;

		background:#ffa;

	}

</style>

 </head>



 <body>

  <div id="container">

     

         <div id="mainContent">

             <div id="sidebar">左侧</div>

             <div id="content">右侧</div>

         </div>

    

 </div>

 </body>

</html>

 

你可能感兴趣的:(css)