Để làm dc 1 layout hoàn toàn ko dùng table chỉ CSS + Div thì cũng ko có gì khó khăn lắm. Quan trọng là bạn phải biết cơ bản những thuộc tính và giá trị của thuộc tính đó có tác dụng ra sao. (các vấn đề đó thì anh TG có nhiều bài rồi)

Sau đây mình xin giải thích cách xếp 1 basic CSS layout:



Phía trên là hình mẫu 1 layout cơ bản với header, 1 sidebar, 1 content column và 1 footer.

Như vậy với layout trên bạn sẽ có 5 id trong CSS:

#container
#header
#sidebar
#content
#footer

Như vậy container là 1 div lớn thường dùng để định dạng vị trí của toàn bộ layout. (thường là giữa) và chỉ có 1 số format sau: (ví dụ thôi nhe)

margin:
padding:

Tiếp theo, làm sao để sắp xếp vị trí các "khối Div" đó theo ý mình. Rất đơn giản, bạn hãy phân layout của mình theo từng khối từ trên xuống dưới và từ trái qua phải. Với layout ví dụ, bạn sẽ chỉ cần 4 khối Div như đã nêu hoặc có thể thêm 1 Div trung gian như kiểu container cho phần sidebar + content.

Thuộc tính dùng để sắp xếp định vị các khối Div buộc phải biết và dùng đó là FLOAT. Với layout ví dụ, bạn chỉ cần float:left; cho tất cả các id. (Ko tính container)  

Nếu bạn ko định width cho container và khối div đúng, những khối div trên sẽ lần lượt nằm cạnh nhau và kéo dài chiều ngang. Nếu bạn đã định width, do ko đủ width, các div đó sẽ rớt xuống và tự động nằm như hình mẫu.

Nhưng bạn ko muốn định width? (Vì web standard mà) thì bạn tiếp tục dùng thuộc tính Clear. Thuộc tính clear sẽ qui định có cái gì dc phép nằm cạnh cái div đó hay ko. Với layout ví dụ thì #Header ko cần biết width bao nhiêu, chỉ cần clear: both, thì chắc chắn #sidebar và #content sẽ phải xuống hàng dưới mà chơi. Tương tự, ko cần biết đủ width hay ko chỉ cần #content có clear:right; thì #footer buộc phải xuống dưới nằm.

Cơ bản là vậy :D với 2/3 hay 4/5/6 column gì thì cũng như nhau. Luôn nhớ, Div khác Table ở chỗ nó ko phải từ ngoài vào trong mà là từ trên xuống dưới và từ trái qua phải :D. Mọi thắc mắc sẽ dc giải đáp :D

Tác giả:Spirit

Thêm ý kiến