Kỹ thuật phân chia cột với thuộc tính FLOAT trong CSS

Khi thiết kế website, nếu bạn phân chia cấu trúc của trang web ra thành nhiều cột khác nhau bạn sẽ làm như thế nào? Bài viết sau đây mình sẽ hướng dẫn bạn thực hiện điều đó đơn giản nhất.

Khi thiết kế website bạn sẽ bắt gặp rất nhiều trường hợp cần phân chia cột. Nếu như trước đây, bạn thường sử dụng thẻ để phân chia thì ngày nay nhiều chuyên gia thiết kế lại không khuyến khích dùng đối tượng này. Vậy, trong những trường hợp này bạn nên tạo ra những thẻ

và sử dụng CSS để tùy chỉnh.
Các bước chia cột trong CSS
Bước 1: Các cột phải luôn có 1 container, tức là luôn nằm trong phần tử mẹ.
Bước 2: Thiết lập chiều rộng cho container và các cột.
Bước 3: Sử dụng thuộc tính float với giá trị left hoặc right để đẩy cột sang trái hoặc sang phải.
Bước 4: Tiến hành clear float.

Ví dụ, mình muốn chia phần nội dung trên website ra thành 2 cột, phần bên trái hiển thị danh mục bài viết và phần bên phải hiển thị nội dung bài viết. Thì lúc này, mình sẽ tạo như hình 1.1 sau đây:

Như vậy, mình đã tạo ra 3 thẻ

khác nhau. Trong đó, #container sẽ chứa 2 cột #sidebar và #content. Tuy nhiên, lúc này các đối tượng chưa hiển thị như mong muốn (hình 1.3). Bây giờ, nhiệm vụ của mình là sẽ làm thế nào để #sidebar và #content sẽ nằm thẳng hàng với nhau để tạo thành 2 cột.
Cách chia cột sử dụng thuộc tính FLOAT trong CSS
Trước tiên, bạn phải thiết lập các thông số cho các thẻ #container, #sidebar và #content bằng CSS như sau:

Kết quả được như hình sau:

Bây giờ, để #sidebar và #content nằm thành 2 cột mình sẽ thêm thuộc tính float: left; vào #sidebar và thuộc tính float: right; vào #container và kết quả:

Vậy là mình đã được 2 cột đúng như mục đích. Nhưng chờ đã, bạn có để ý là cái #container bị co lại không? Vậy, làm sao để #sidebar và #content nằm gọn trong “lòng” #container đây!...

Làm thế nào để khung được FLOAT không bị tràn ra ngoài khung chính?
Tuy là một lỗi nhỏ những lại trông rất buồn cười và trông website của bạn sẽ không chuyên nghiệp. Để khắc phục, mình có 2 cách đơn giản để xử lý:
1. Tạo 1

khác và dùng thuộc tính CLEAR
Đây là cách đơn giản nhất và rất phổ biến từ rất lâu rồi. Đó là mình sẽ khai báo thêm 1 thẻ

nữa và gán thuộc tính clear: both;
Lưu ý: Thuộc tính clear có 4 giá trị: left, right, both và none. Và bạn chỉ cần dùng giá trị both để clear cho cả 2 bên.

2. Sử dụng thuộc tính OVERFLOW
Cách này thì nhanh lẹ hơn và không cần phải chỉnh sửa HTML như cách trên. Mình chỉ cần viết thêm thuộc tính overflow: auto; cho #container là được, kết quả vẫn sẽ giống như ở trên.

Và kết quả cuối cùng đạt được là đây. Ahihi!...

css HTML July 02, 2018