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

Design page layout using CSS

Page layout and CSS code
Before you proceed, it’s useful to have an idea about page’s sections. I suggest to use this layout (2 column fixed size):

/* ------------------------------
PAGE STRUCTURE
------------------------------ */

/*
#container has an absolute width (780 pixel)
The width of inner elements is set to auto,
in this way all inner elements have the same
width of the element which contains them
*/

#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}

#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}

/*
div.spacer, solve an issue with #container height
in css 2 column layout.
*/

div.spacer{clear:both; height:10px; display:block;}

#footer{width:auto; display:block; height:24px;}

Source: http://woork.blogspot.com