Bài 15: Chia Cột Trong CSS Với Float Và Overflow

Trong bài này chúng ta sẽ tìm hiểu về cách chia cột trong CSS sử dụng thuộc tính float và overflow.

Chia cột trong CSS

Một trang HTML mặc định thì nó không có chia cột, nội dung nó hiển thị một cột từ trên xuống dưới. Và để chia cột thì chúng ta có thể sử dụng thuộc tính float.

Ví dụ: bây giờ mình sẽ tạo 03 cái cột cho trang HTML, trong đó có một cái lớn bao bọc hai cái còn lại như sau:

<html lang="vi">
    <head>
        <meta charset="utf-8" />
        <title>Tiêu đề webiste</title>
        <style type="text/css">
            #khung-bao-ngoai {
            width: 600px;
            height: 200px;
            border: solid blue 3px;
            padding: 10px;
            }
            #noi-dung-bai-viet {
            width: 60%;                                
            background: #e8e8e8;
            float: left;
            padding: 10px;
            }
            #khung-sidebar {
            width: 30%;
            height: 150px;
            background: #e8e8e8;
            float: right;
            padding: 10px;
            }
        </style>
    </head>
    <body>
        <div id="khung-bao-ngoai" class="Khung bao ngoài">
            <div id="noi-dung-bai-viet">Nội dung bài viết, nội dung bài viết, nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết. </div>
            <div id="khung-sidebar">Khung sidebar chứa các widget bên phải</div>
        </div>
    </body>
</html>

Trong ví dụ trên mình đã tạo một cái khung bao ngoài có chiều rộng là 600px, cột nội dung mình cho nó rộng 60%, cột sidebar là 30%, còn dư 10% dành cho padding.

Các bạn để ý trong CSS dành cho khung nội dung (#khung-noi-dung) mình cho nó float: left; (nằm bên trái); còn thằng #khung-sidebar cho nó float: right; (nằm bên phải);

Cuối cùng thì được kết quả như các bạn xem demo đó, bây giờ một trang web của chúng ta được chia ra làm 02 cột, mỗi cột chiếm 60% và 30% chiều rộng của khung 600px.

Sử dụng thuộc tính overflow

Ở phần trên chúng ta đã chia cột ra làm 02, đó là phần chia về chiều rộng, còn chiều cao thì sao nhỉ ? Các bạn xem demo sẽ thấy rằng phần nội dung bài viết nó bị tràn ra khỏi cái khung lớn đúng không nào ? Như vậy sẽ rất là xấu, do đó chúng ta sẽ sử dụng thuộc tính overflow để cho cái khung lớn nó tự động thay đổi chiều cao tổng thể để và khít với chiều cao với khung nội dung bên trong.

Để sử dụng thuộc tính overflow các bạn phải xóa đi phần height 200px của khung bao ngoài (#khung-bao-ngoai ), tiếp theo là thêm vào đoạn CSS.overflow: auto; và xem kết quả nhé !

<html lang="vi">
    <head>
        <meta charset="utf-8" />
        <title>Tiêu đề webiste</title>
        <style type="text/css">
            #khung-bao-ngoai {
            width: 600px;
            border: solid blue 3px;
            padding: 10px;
            overflow: auto;
            }
            #noi-dung-bai-viet {
            width: 60%;                                
            background: #e8e8e8;
            float: left;
            padding: 10px;                
            }
            #khung-sidebar {
            width: 30%;
            height: 150px;
            background: #e8e8e8;
            float: right;
            padding: 10px;
            }              
        </style>
    </head>
    <body>
        <div id="khung-bao-ngoai" class="Khung bao ngoài">
            <div id="noi-dung-bai-viet">Nội dung bài viết, nội dung bài viết, nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết,  nội dung bài viết. </div>
            <div id="khung-sidebar">Khung sidebar chứa các widget</div>
        </div>
    </body>
</html>

Mình cũng nói thêm, thuộc tính overflow nó sẽ có các giá trị như sau:

visible: Khi chiều cao của box không đủ chứa text, thì text vẫn hiển thị tràn qua box, đây là mặc định.
hidden: Khi chiều cao của box không đủ chứa text, thì text bị tràn sẽ được ẩn đi.
scroll: Khi chiều cao của box không đủ chứa text, thì phần text bị tràn sẽ được ẩn đi và xuất hiện thanh scroll, khi cuộn sẽ hiển thị text.
auto: Khi chiều cao của box không đủ chứa text, thì thanh scroll sẽ tự động hiển thị.

See the Pen
Chia cột trong CSS với float và overflow by Hocban.vn (@hocbanvn)
on CodePen.

Oke, thì bài này nội dung nhiêu đây thôi, chúng ta chỉ cần chia được trang HTML ra làm hai cột như vậy là được rồi. Sẽ còn nhiều thứ để làm và chúng ta sẽ thực hiện trong những bài tiếp theo.

Bài học trước đó và tiếp theo

4/5 - (8 votes)

Học Bạn .vn

[Học CSS] Bài 15: Chia cột trong CSS với float và overflow

Chia cột trong CSS

Sử dụng thuộc tính overflow

Bài học trước đó và tiếp theo

About The Author

Tịnh Nguyễn

Chia cột trong CSS

Sử dụng thuộc tính overflow

Bài học trước đó và tiếp theo

About The Author

Tịnh Nguyễn

Related Posts