我不明白，但我之前做过，现在它不起作用。我创建了一个基本的HTML和CSS文件，当客户端决定在内容区域中插入更多内容时，我有一个需要增长的内容区域，但它无法正常工作。内容区域与下面的其他元素重叠。有人可以帮忙，并解释原因吗？
HTML：
<html>
<head>
<title>Welcome to Boulineau's Website</title>
<link href="style/style.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="container">
<div id="sidebar">
<div id="sidelinks">
<a href="#"><img src="images/sidenav_03.png" alt="IGA" width="180" height="165" border="0" title="IGA Grocery Store" /></a>
<a href="#"><img src="images/sidelinks_05.png" alt="Ace" width="180" height="115" border="0" title="Ace Hardware" /></a>
<a href="#"><img src="images/sidelinks_06.png" alt="Eugene" width="180" height="100" border="0" title="Eugene Platt's Seafood" /></a>
<a href="#"><img src="images/sidelinks_07.png" alt="Barnacle" width="180" height="90" border="0" title="Barnacle Beach Shoppe" /></a>
<a href="#"><img src="images/sidelinks_08.png" alt="Hut" width="180" height="100" border="0" title="The Dairy Hut" /></a>
<a href="#"><img src="images/sidelinks_09.png" alt="Ocean" width="180" height="90" border="0" title="Ocean Treasures Resort Wear" /></a>
<a href="#"><img src="images/sidelinks_10.png" alt="Shell" width="180" height="85" border="0" title="Shell & Car Wash" /></a>
<a href="#"><img src="images/sidelinks_11.png" alt="Laundromat" width="180" height="85" border="0" title="Laundromat" /></a>
</div><!-- end of sidelinks -->
</div><!-- end of sidebar -->
<div id="weeklyspecials">
<a href="#"><img src="images/weeklyspecials_03.png" alt="Weekly Specials" width="269" height="58" border="0" title="Click for Weekly Specials" /></a>
</div><!-- end of weeklyspecials -->
<div id="mainimage">
<img src="images/mainimage_03.png" alt="Main Image" width="648" height="319" border="0" />
</div><!-- end of mainimage -->
<div id="navigationbar">
<a href="#"><img src="images/home.png" alt="Home Page" width="45" height="14" border="0" title="Home Page" /></a>
<a href="#"><img src="images/aboutus.png" alt="About Us" width="65" height="14" border="0" title="About Us" /></a>
<a href="#"><img src="images/cherrygrovebeach.png" alt="Cherry Grove Beach" width="120" height="14" border="0" title="Cherry Grove Beach" /></a>
<a href="#"><img src="images/specialevents.png" alt="Special Events" width="92" height="14" border="0" title="Special Events" /></a>
<a href="#"><img src="images/tidecharts.png" alt="Tide Charts" width="77" height="14" border="0" title="Tide Charts" /></a>
<a href="#"><img src="images/employment.png" alt="Employment" width="82" height="14" border="0" title="Employment" /></a>
<a href="#"><img src="images/printablecoupon.png" alt="Printable Coupons" width="98" height="14" border="0" title="Printable Coupons" /></a>
</div><!-- end of navigation -->
<div id="content">
<P>
<img src="images/lobster.png" alt="" width="329" height="229" border="0" title="" />
Content Area needs to grow...anything below gets push down.
</P>
</div><!-- end of content -->
// These div down delow must be push down by the content area when it grows.
<div id="video">
<img src="images/video_03.png" alt="Video" border="0" width="263" height="193" title="Video" />
<div><!-- end of video -->
<div id="weeklyadbox">
<img src="images/weeklyad.jpg" alt="Weekly Ad" border="0" width="178" height="147" title="Weekly Ad" />
</div><!-- end of weeklyadbox -->
</div><!-- end of container -->
</body>
</html>
CSS：
* {
padding: 0;
margin: 0;
}
body {
text-align: center;
background-image: url("../images/waterbg.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
position: center, top;
}
div#container {
background-image: url("../images/contentbg_02.jpg");
width: 900px;
background-repeat: no-repeat;
margin: 0 auto;
background-color: white;
margin: 0 auto;
border: 1px solid black;
position: relative;
z-index: 0;
height: auto;
}
div#sidebar {
float: left;
position: relative;
left: -40px;
top: 14px;
background-image: url("../images/sidebar_03.png");
background-repeat: no-repeat;
width: 314px;
border: 1px solid black;
height: 1161px;
z-index: 5;
}
div#sidelinks {
position: absolute;
left: 72px;
top: 275px;
cursor: pointer;
}
div#weeklyspecials {
float: right;
margin-top: 47px;
margin-right: 17px;
border: 1px solid black;
}
div#mainimage {
float: right;
position: absolute;
top: 90;
right: 13px;
z-index: 0;
background-attachment: fixed;
}
div#navigationbar {
background-image: url("../images/nav_03.png");
width: 620px;
height: 44px;
background-repeat: no-repeat;
float: right;
position: relative;
margin-top: -780px;
margin-right: 25px;
}
div#navigationbar img {
margin-top: 15px;
}
div#content {
background-image: url("../images/welcome2.png");
background-repeat: no-repeat;
width: 657px;
/*height: 368px;*/
z-index: 100;
float: right;
margin-top: -732px;
background-color: white;
border: 1px solid black;
}
div#content p {
float: left;
margin-top: 140px;
margin-left: 10px;
text-align: left;
line-height: 30px;
font-size: 12px;
font-family: georgia;
border: 1px black solid;
}
div#content p img {
float: right;
}
div#video {
margin-top: -258px;
margin-left: -90px;
padding-top: 10px;
top: 900px;
}
div#weeklyadbox {
float: right;
margin-top: -198px;
margin-right: 80px;
background-image: url("../images/weeklyadbox_04_03.jpg");
background-repeat: no-repeat;
width: 243px;
height: 284px;
padding-top: 120px;
position: relative;
}
如果您想知道，我会大量使用边框作为参考。无论如何，我尝试使用id="content"创建一个名为spacer的空div，并使用clear: both并使用{{1}}，但它无效。
答案 0 :(得分：1)
为避免出现类似问题，我建议使用CSS框架。基金会提供了一个我真正喜欢的12列灵活网格。您可以在http://foundation.zurb.com
找到它如果您使用此框架重写HTML，它将如下所示：
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>Welcome to Boulineau's Website</title>
<!-- Included CSS Files -->
<link rel="stylesheet" href="stylesheets/foundation.css">
<link rel="stylesheet" href="stylesheets/app.css">
<!--[if lt IE 9]>
<link rel="stylesheet" href="stylesheets/ie.css">
<![endif]-->
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- container -->
<div class="container">
<div class="row">
<div class="four columns"><!-- left nav -->
<a href="#"><img src="images/sidenav_03.png" alt="IGA" width="180" height="165" border="0" title="IGA Grocery Store" /></a>
<a href="#"><img src="images/sidelinks_05.png" alt="Ace" width="180" height="115" border="0" title="Ace Hardware" /></a>
<a href="#"><img src="images/sidelinks_06.png" alt="Eugene" width="180" height="100" border="0" title="Eugene Platt's Seafood" /></a>
<a href="#"><img src="images/sidelinks_07.png" alt="Barnacle" width="180" height="90" border="0" title="Barnacle Beach Shoppe" /></a>
<a href="#"><img src="images/sidelinks_08.png" alt="Hut" width="180" height="100" border="0" title="The Dairy Hut" /></a>
<a href="#"><img src="images/sidelinks_09.png" alt="Ocean" width="180" height="90" border="0" title="Ocean Treasures Resort Wear" /></a>
<a href="#"><img src="images/sidelinks_10.png" alt="Shell" width="180" height="85" border="0" title="Shell & Car Wash" /></a>
<a href="#"><img src="images/sidelinks_11.png" alt="Laundromat" width="180" height="85" border="0" title="Laundromat" /></a>
</div>
<div class="eight columns"> <!-- right area -->
<div>
<a href="#"><img src="images/weeklyspecials_03.png" alt="Weekly Specials" width="269" height="58" border="0" title="Click for Weekly Specials" /></a>
</div>
<div>
<img src="images/mainimage_03.png" alt="Main Image" width="648" height="319" border="0" />
</div>
<div class="row"> <!-- nav -->
<div class="one columns">
<a href="#"><img src="images/home.png" alt="Home Page" width="45" height="14" border="0" title="Home Page" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/aboutus.png" alt="About Us" width="65" height="14" border="0" title="About Us" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/cherrygrovebeach.png" alt="Cherry Grove Beach" width="120" height="14" border="0" title="Cherry Grove Beach" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/specialevents.png" alt="Special Events" width="92" height="14" border="0" title="Special Events" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/tidecharts.png" alt="Tide Charts" width="77" height="14" border="0" title="Tide Charts" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/employment.png" alt="Employment" width="82" height="14" border="0" title="Employment" /></a>
</div>
<div class="one columns">
<a href="#"><img src="images/printablecoupon.png" alt="Printable Coupons" width="98" height="14" border="0" title="Printable Coupons" /></a>
</div>
</div>
<div class="row"> <!-- content -->
<div class="twelve columns">
<P>
<img src="images/lobster.png" alt="" width="329" height="229" border="0" title="" />
Content Area needs to grow...anything below gets push down.
</P>
<div>
</div>
<div>
<img src="images/video_03.png" alt="Video" border="0" width="263" height="193" title="Video" />
</div>
<div>
<img src="images/weeklyad.jpg" alt="Weekly Ad" border="0" width="178" height="147" title="Weekly Ad" />
</div>
</div>
</div>
</div>
<!-- container -->
<!-- Included JS Files -->
<script src="javascripts/foundation.js"></script>
<script src="javascripts/app.js"></script>
</body>
</html>
除了减少常见的CSS问题外 - 还有很多问题。该框架提供了一个简单的模型，一致性以及其他一些方便的东西，如内置的按钮，标签，以及移动支持和检测。