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

Trong phần này ta bắt đầu gán các thuộc tính của CSS cho từng div để có được những thông số cơ bản như màu nền, chiều cao, float ...

 

 #header {
 background: blue;
 height: 150px;
 }

 #sidebar-a {
 background: darkgreen;
 }

 #content {
 background: green;
 }

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

Sau khi đưa thông số CSS như trên vào, ta có đựoc màu nền của các thẻ

 #sidebar-a {
 float: right;
 width: 280px;
 background: darkgreen;
  }

Thuộc tính float: right; Gán vị trí của Div khi hiển thị nằm bên phải (canh lề phải)
Bây giờ ta sẽ đưa nội dung ví dụ vào trong content để xem nó hiển thị thế nào. Copy đọan code dưới đây vào giữa thẻ div content

<div id="content">
   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. 
   Sed ut mauris. Fusce malesuada enim vitae lacus 
   euismod vulputate. Nullam rhoncus mauris ac metus.
   Maecenas vulputate aliquam odio. 
   Duis scelerisque justo a pede. Nam augue lorem, semper at, 
   porta eget, placerat eget, 
   purus. Suspendisse mattis nunc vestibulum ligula. In hac 
   habitasse platea dictumst.
</div>

Ta có được kết quả như sau. Nhưng có vấn đề xảy ra là phần chữ nằm tràn cả sang phần diện tích của Sidebar A mà lúc trước ta đã gán float: right;