Dưới đây là ví dụ. Phần tử chính #banner kéo dài toàn màn hình và được ghim vào đầu chế độ xem bằng cách sử dụng position: absolute; top: 0; left: 0. Các width: 100% làm cho nó kéo dài chiều rộng đầy đủ.
#banner-content là nơi bạn đặt nội dung của mình. Đây là trung tâm và cố định ở chiều rộng 800px. Tôi đã đặt một đường viền xung quanh nó để bạn có thể nhìn thấy.
Lưu ý: Tôi cũng đã 'đặt lại' lề và phần đệm của tất cả các phần tử để xóa lớp đệm mặc định. Bạn có thể muốn sử dụng một cái gì đó như Eric Meyer Reset CSS trong ứng dụng cuối cùng của bạn.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test</title>
<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
div#banner {
position: absolute;
top: 0;
left: 0;
background-color: #DDEEEE;
width: 100%;
}
div#banner-content {
width: 800px;
margin: 0 auto;
padding: 10px;
border: 1px solid #000;
}
div#main-content {
padding-top: 70px;
}
</style>
</head>
<body>
<div id="banner">
<div id="banner-content">
This is your banner text, centered and fixed at 800px in width
</div>
</div>
<div id="main-content">
<p>Main page content goes here</p>
</div>
</body>
</html>
Tôi tạo ra một fiddle cho điều này trong khi nghiên cứu một vấn đề tương tự: http://jsfiddle.net/marvo/FJZfW/ – Marvo