Kaitan Outer-Wrapper dengan Pelebaran Postingan atau Sidebar - Minima Today #2

Di serial Minima Today sebelumnya, kita membahas Cara melebarkan area postingan atau sidebar (Baca: Melebarkan area Postingan atau Mengecilkan Sidebar). Nah, sekarang saatnya membahas kaitan outer-wrapper dengan postingan (main-wrapper) dan sidebar (sidebar-wrapper).


Jika boleh menganalogi, outer-wrapper diibaratkan nampan atau tempat minum. Postingan adalah piring dan sidebar adalah gelasnya. Misal baki itu berukuran lebar 50 cm, maka ia akan bisa membawa piring berukuran 30 cm dan gelas 20 cm. Jika piring yang dibawa lebih kecil, maka gelasnya bisa lebih besar atau ditambah dengan satu gelas lagi. Namun, jika piring tetap 30 cm kita tidak akan bisa menambah gelas yang lebih besar atau  menambah gelas lagi. Nampannya tidak muat dan gelas akan jatuh. Jika memaksa untuk membawa banyak barang tentu Anda harus mencari nampan yang lebih lebar.

Jika pada postingan sebelumnya saya memberi instrukti Anda untuk mempertahankan jumlah lebar postingan dan lebar sidebar, sekarang Anda boleh tidak mempertahankannya. Anda boleh melebarkan keduanya, namun dengan syarat seperti analogi di atas, Anda harus mencari juga wadah yang lebih lebar, dalam arti Anda juga harus melebarkan 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 */
}



Pada keadaan standart lebar outer-wrapper minima adalah 660px, postingan 410px dan sidebar 220px.
660 - (410 + 220) berarti outer-wrapper masih memiliki sisa 30px, Nah sisa ini digunakan untuk jarak area postingan dengan tepi kiri, jarak area postingan dengan area sidebar dan jarak sidebar dengan tepi kanan. Jika Anda ingin melebarkan area postingan jgua melebarkan area sidebar, tugas Anda adalah lebarkan juga outer-wrapper dengan catatn tetap menyisakan jarak sebesar 30px (atau Anda bisa menambah sisa untuk memberikan jarak yang lebih besar).

Misal saya merubah lebar postingan menjadi 500px, sidebar menjadi 300px, maka saya ubah juga lebar outer-wrapper menjdai (500+300+30) = 830px. Semoga Anda paham dan semoga bermanfaat.