چینش صفحه – دو ستون – عرض ثابت + لایه های گسترده

HTML

<div class="container">
    <div class="header">
        <div class="wrapper">
            <h1><a href="http://www.webtarget.ir/">webtarget.ir</a></h1>
            <h2>دو ستون - عرض ثابت + لایه های گسترده</h2>
        </div>
    </div>
    <div class="navigation">
        <div class="wrapper">
            <ul>
                <li><a href="#">خانه</a></li>
                <li><a href="#">درباره ما</a></li>
                <li><a href="#">خدمات</a></li>
                <li><a href="#">ارتباط با ما</a></li>
            </ul>
        </div>
    </div>
    <div class="content">
        <div class="contentBody">
            <h2>آموزش چینش صفحات وب سایت با استفاده از CSS</h2>
            <p>کد نویسی بر اساس استاندارد W3C انجام شده است</p>
            <p>چینش بر اساس زبان فارسی و از راست به چپ است - rtl </p>
            <br class="clearfloat" />
        </div>
        <div class="sideBar">
            <h3>سر فصل برای ستون کناری</h3>
            <p>با ساختار و چینش های استاندارد آشنا شوید</p>
        </div>
        <br class="clearfloat" />
    </div>
    <div class="footer">
        <div class="wrapper"> Copyright©webtarget.ir|2011 </div>
    </div>
</div>

CSS

@charset "utf-8";
/* CSS Document */
/*-------------------------*/
/* Design & Style by       */
/* Amir Sorouri            */
/* [email protected]  */
/*-------------------------*/

/*--------- reset ---------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}
ol, ul {
    list-style: none;
}
body { font:62.5%/1.7em Tahoma, Arial, sans-serif;direction:rtl;}

/* ---------- Requirment ----------*/
.container {font-size:1.2em;}
.clearfloat {clear:both; height:1%;}
h1 , h2 , h3  { font-family:Arial, Helvetica, sans-serif;}
h1 { font-size:1.8em;}
h2 { font-size:1.6em;}
h3 { font-size:1.4em;}

/* ---------- Main -----------*/
.wrapper{margin:0 auto;}

/* ---------- Header -----------*/

.header
{
    background:#ccc;
}

.header .wrapper { padding:20px; width:920px;}
.header h1 { text-align:left;}
.header h1 a{ text-decoration:none; color:#09F;}

/* ---------- Navigation -----------*/

.navigation .wrapper { width:960px;}

.navigation
{
    background:#333;
    height:30px;
    line-height:30px;
}

.navigation ul li
{
    float:right;
}

.navigation li a
{
    display: block;
    height:30px;
    padding:0 15px;
    color:#fff;
    text-decoration: none;
    border-left: 1px solid #fff;
}

.navigation li a:hover { background:#09F; }

/* ---------- Content -----------*/


.content
{
    margin:0 auto;
    width:960px;
    background:url(sideBarBg.jpg) repeat-y left top #eee;
}

.contentBody
{
    width:650px;
    float:right;
    padding:20px;
}

.contentBody p { text-align:justify; line-height:17px;}

.contentBody h2
{
    margin: 0 0 .5em;
}

/* ---------- Side Bar -----------*/

.sideBar
{
    width:250px;
    float:left ;
    padding:20px 10px;

}
.sideBar h3
{
    margin: 0 0 .5em;
}

/* ---------- Footer -----------*/
.footer .wrapper { width:960px;}
.footer
{
    background:#ccc;
    padding: 20px;
    text-align:left;
}