1
我有以下HTML佈局HTML - CSS問題的DIV
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
margin:10px 0px 0px 0px;
font-size: 11px;
font-family: Arial,Tahoma, sans-serif;
background: #fff;
color: #444;
}
h1 {
font-size:1.5em;
font-weight: bold;
}
#container {
width: 920px;
margin: 0 auto;
background-color: red
}
#header {
border: 2px solid #ccc;
height: 80px;
}
#content{
display: block;
width: 100%
}
#left {
clear: left;
float: left;
width: 660px;
border: 2px solid #ccc;
margin:0 0 10px 0;
padding:20px;
}
#right {
position: relative;
margin: 0 5px 0 5px;
padding: 5px 0px 0px 0px;
float: right;
width: 200px;
border: 2px solid #ccc;
}
#footer {
clear: both;
border: 2px solid #ccc;
padding: 10px 0 20px 0;
margin: 20px 0 0 0;
font-size: .9em;
color: #9b9b9b;
width: 100%;
background-color: skyblue;
}
</style>
</head>
<body>
<div id="container">
<div id="header" >
<h1>Header</h1>
</div>
<div id="content">
<div id="left">
<h1>Left</h1>
</div>
<div id="right">
<h1>Right</h1>
</div>
</div>
</div>
<div id="footer">
<h1>Footer</h1>
</div>
</body>
</html>
我的問題是#container的不成立的#left & #right內容，它僅持有的#header
請參見附件成像看看我的預期佈局是什麼。
