div+css三栏式布局实例

<div id="wrap">
        <div id="header">++DIV布局三栏式自由伸展++</div>
        <div class="innerwrap">
            <div id="left">
                <ul>
                    <li>左侧导航1</li>
                    <li>左侧导航2</li>
                    <li>左侧导航3</li>
                    <li>左侧导航4</li>
                    <li>左侧导航5</li>
                </ul>
            </div>
            <div id="right">
                <span class="tt2">缺点:以百分比宽度，当浏览器以极小的窗口模式浏览时，容易引起偏差 ... IE偏差较多。<br/>
                <br/>不过一般出现如此浏览者若非测试者就是SB！</span>
            </div>
            <div id="content">
                <span class="tt"> 三栏式自适应高度，总宽度可自由设定，也可百分比屏幕宽度，但左右导航菜单栏须设定固定宽度。</span>
                <h1>以下内容均属胡扯</h1>
                <p>  This is Content!slskjdflksjdfkljsd sldfjslkdf jlskdjf lskdjflksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;l ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;sdjf sl;dkfj sl;djf ldskjf;lsjd</p>
            </div>
            <div class="clear"></div>
        </div>    
        <div id="foot">Copyright &copy; <a href="http://www.louzi.net">PhoenixChen</a></div>
    </div>

 

 

*{...}{margin:0;padding:0;}
body{...}{
background:#f4f4f4;
margin:10px;
color:#fff;
background:url(http://louzi.net/styles/avril/images/header.gif)
}

#wrap{...}{
    margin-left:auto;
    margin-right:auto;
                     /**//*上面这两个属性设置发现可以达到居中的效果*/
    background:#A5D854 url(http://louzi.net/tmp/0907/111.gif) repeat-y;
    /**//*background-color:Red;*/
    width:980px;
}

#header{...}{
    background:#f60 url(http://www.louzi.net/tmp/vampire2.gif) right bottom no-repeat ;
    line-height:60px;
    text-align:center;
    height:70px;
    width:100%;
    border-bottom:3px solid #000;
}

.innerwrap{...}{
background:url(http://louzi.net/tmp/0907/222.gif) right repeat-y;
text-align:left;clear:both;
}

#wrap ul{...}{
list-style-type:decimal;
}
#left{...}{
width:190px;float: left;padding:5px;

}
#right{...}{
width:190px;

float:right;padding: 5px;

}
#content{...}{
margin-left:205px;
margin-right:205px;
color:#000;
padding-top:10px;padding-bottom:10px;
}
#foot{...}{
clear:both;
height:40px;
background:#AB9311;
color:#000;
line-height:35px;
text-align:center;
border-top:3px solid #000;
font-size:11px;
font-family:tahoma;
}
.clear{...}{
font: 0px/0px sans-serif;
clear: both;
display: block;
}