Melebarkan kolom posting

Caranya :

1. cari kode seperti ini

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Sedikit keterangannya nih..

#outer-wrapper == ukuran paper kamu secara keseluruhan
#main-wrapper == ukuran main kolom ( kolom postingan )
#sidebar-wrapper == ukuran sidebar kolom
main-wrapper + sidebar-wrapper + pading = main wrapper
exmpl : 410 + 220 + 30 = 660

kamu bisa kutak katik sendiri, but copy ini kalau kamu mau lebarin kolom posting doank

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 700px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 450px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

2. Bagian Header dan footer

pertama cari kode...

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

rubah menjadi :

#header-wrapper {
width:700px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

lalu cari kode..

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;

rubah menjadi

#footer {
width:700px;
clear:both;
margin:0 auto;
padding-top:15px;

Width buat outer-wrapper sama dengan bagian hearder and footer

Share on: Facebook Twitter Google+ Linkedin Technorati Digg LintasMe

Related Articles :