Tạo một CSS layout từ một bản thiết kế - phần 5

Ở phần trước chúng ta đã đưa nội dung vào content và bị vấn đề là phần text bị tràn qua cột bên phải . Sau đây ta sẽ tìm hiểu nguyên nhân tại sao và làm thể nào để fix nó.

Nguyên nhân ở đây là ta mới chỉ quy định cho div content kích thước chiều ngang. Đến đây ta làm một phép tính đơn giản 760px chiều rộng của toàn bộ div page-container - đi 280px chiều rộng của div Sidebar, như vậy còn 480px. Ta cũng đã thiết lập chiều rộng của div container là 480px, như vậy bây giờ ta chỉ cần đặt thuộc tính margin để div container nằm cách đường biên phải 1 khoảng 280px

Bây giờ ta đưa đọan code margin-right: 280px vào CSS của div Content

#content {
 margin-right: 280px;
 background: green;
  }

Và đưa thêm nội dung ví dụ vào trong div Sidebar

<div id="sidebar-a">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  Nullam gravida enim ut risus. 
  Praesent sapien purus, ultrices a, varius ac, suscipit 
  ut, enim. Maecenas in lectus. 
  Donec in sapien in nibh rutrum gravida. 
</div>

Đến đây phần content đã giải quyết xong, tuy nhiên do phần nội dung của Sidebar nhiều hơn nên nó sẽ dài hơn content, nhưng footer lại ăn theo content nên phần nội dung của sidebar lại đè lên foote.

Để giải quyết cái bug này, ta dùng thuộc tính clear: both; để xóa đi phần không gian mà content thiếu gây tình trạng footer bị đẩy lên.

#footer {
 clear: both;
 background: orange;
 height: 66px;
  }

Lưu ý: đây cũng là một trường hợp thường xuyên gặp khi dùng div. Vì vậy các bạn nên tìm hiểu kỹ phần này để khắc phục trong những trường hợp tương tự.