CSS div container

this is just sample main div which containes all content structure

#container {
width:980px;
position:absolute;
left:50%;
margin:0px 0px 0px -490px;
padding:0;
background-color:#FFCC99;
}

CSS HTML Document Flow

Document flow merupakan suatu konsep yang digunakan oleh User Agent untuk menempatkan elemen-elemen HTML di dalam dokumen. Di dalam suatu dokumen HTML dapat terjadi dua jenis document flow, yaitu Normal dan Ubnormal. Normal document flow merupakan proses penempatan elemen-elemen HTML, dimana semua elemen membawa nilai posisi default atau Static Positioning. Pada kondisi ini, setiap elemen akan ditempatkan saling berturutan dari atas ke bawah di dalam dokumen. Sedangkan untuk Ubnormal document flow terjadi ketika suatu elemen HTML keluar dari aliran normal dokumen, yang mana terjadi sebagai akibat ditempatkannya elemen tersebut secara Absolute, Fixed atau Relative dan menggunakan attribute Float. Sketsa dari normal document flow dapat dilihat pada gambar di bawah ini :

Sedangkan untuk perilaku dari ubnormal flow dapat dilihat pada masing-masing penyebab terjadinya ubnormal flow.

source: http://iznyn.com

CSS Relative Positioning

Perilaku dari Relative Positioning hampir sama dengan Absolute Positioning. Hanya saja dari pada memposisikan elemen relatif terhadap elemen induk terdekat yang telah mendapatkan perlakuan khusus (sebagai akibat diposisikannya suatu elemen induk secara absolute, relative maupun fixed), Relative Positioning akan memposisikan elemen relatif terhadap posisi awal dari elemen ketika berada pada aliran normal. Perhatikan gambar dibawah ini :

Sebagai catatan bahwa pada gambar diatas, box 2 kita asumsikan diberikan suatu nilai lebar sehingga lebih kecil dari semula, hal ini hanya untuk mempermudah penjelasan saja. Berdasarkan gambar tersebut, ketika suatu elemen diposisikan secara relative maka dia akan membentuk layer baru beserta elemen turunannya dan menariknya area yang semula dia duduki tidak ditempati oleh elemen dibawahnya atau dengan kata lain bahwa memposisikan suatu elemen secara relative tidak akan merusak aliran normal dari kontainernya. Dan kemudian penempatan elemen akan didasarkan pada posisi awal dari elemen saat berada pada aliran normal.

Contoh:

#div{
position: relative;
top: 30px;
left: 30px;
background-color: #e4e4e4;
border: 1px dashed #aaa;
}

resume:
jadi Relative Positioning maksudnya adalah dia akan bergeser dari tempat seharusnya, negatif artinya keluar, positif artinya kedalam.
Hal ini, bisa juga menggunakan property LEFT, RIGHT, dan BOTTOM…

source: http://iznyn.com