css 一些 常用布局

div骨架

    <div id="header">ss</div>
    <div id="container">
        <div id="content">ss</div>
        <div id="side">ss</div>
    </div>
    <div id="pagefooter">ss</div>

css样式

1-2-1布局  绝对定位法

<style>
    div{}{
        border:solid 1px red;
    }
    #header,#container,#pagefooter{}{
        margin:0 auto;
        width:760px;
    }
    #container{}{
        position:relative;
    }
    #content{}{
        position:absolute;
        top:0;
        left:0;
        width:500px;
    }
    #side{}{
        margin:0 0 0 500px;
    }
</style>

1-2-1布局 浮动法

<style>
    div{}{
        border:solid 1px red;
    }
    #header,#container,#pagefooter{}{
        margin:0 auto;
        width:760px;
    }
    #content{}{
        float:left;
        width:498px;
    }
    #side{}{
        float:left;
        width:258px;
    }
    #pagefooter{}{
        clear:both;
    }
</style>