css+div布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>2列右侧固定左侧自适应宽度,未知高度且底部平齐+头部+导航+尾部——<a href="http://www.aa25.cn">标准之路www.aa25.cn</a></title>
<link href="layout.css" rel="stylesheet" type="text/css" />
<meta name="Keywords" content="标准之路,www.aa25.cn,网页标准布局,DIV+CSS" />
<meta name="" content="标准之路,www.aa25.cn,网页标准布局,DIV+CSS" />
<meta name="author" content"×××,有问题请到www.68css.cn网站留言" />
<meta name="Description" content="本套网页标准布局模板是由标准之路(www.aa25.cn)制作完成,如果您要转载,请保留版权" />
</head>

<body>
<div id="container">
  <div id="header">This is the Header</div>
  <br class="clearfloat" />
  <div id="menu">This is the Menu</div>
  <br class="clearfloat" />
  <div id="mainContent">
    <div id="sidebar">This is the sidebar<br />
    
    </div>
    <div id="content">2列右侧固定左侧自适应宽度,未知高度且底部平齐+头部+导航+尾部——<a href="http://www.aa25.cn">标准之路www.aa25.cn</a><br />
      <br />
      本例和例21差不多,一个是固定宽度,一个是自适应,同样是未知高度。<br />
      <br />
      此例中需要说明一点的是:当content设定高度后,3像素会跑到content外侧,反之,在content内部。这样,我们用!important修正在ie下向左多浮动2像素,加上3像素的bug正好是5像素,所以在火狐和IE下显示是一样的,这是大家必须注意的一点。而当content设定高度后,如100px,那么在IE6下,当高度超过100px时,它会自动把conent撑高,而火狐去不会。所以用!important修正在IE下设定高度值使它的3像素跑到外侧,火狐下因不存在3像素问题,所以高度自动。<br />
      <br />
      <br />
  总之,实现的方法是多种多样的,这只是本人在学习过程中总结的一点经验,权当抛砖引玉,希望能对您有所帮助,当然您有更好的办法和布局,欢迎一块来学习,交流,让web标准在中国得到更好的发展。同时希望您继续关注标准之路(www.aa25.cn)<br />
<br />
  如果您要实现未知高度底部平齐,请参考23例<br />
  
    </div>
  </div>
  <br class="clearfloat" />
  <div id="footer">This is the footer<span style="display:none"><script language="javascript" type="text/javascript" src="http://js.users.51.la/1967272.js"></script></span></div>
</div>
</body>
</html>

 

css

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

#container {margin:0 auto; width:100%;}
#header { height:100px; background:#9c6; margin-bottom:5px;}
#menu { height:30px; background:#693; margin-bottom:5px;}
#mainContent { background:url(bg.gif) right 0 repeat-y; overflow:auto;zoom:1; margin-bottom:5px;}
#sidebar { float:right; width:200px;background:#cf9;}
#content { margin-right:205px !important; margin-right:202px; height:auto !important; height:100px; background:#ffa;}
#footer { height:60px; background:#9c6;}
.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px;}
 

你可能感兴趣的:(css)