1
私は分かりませんが、以前はやっていましたが、今は動作しません。基本的な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"と終了divタグの後に、clear: bothを使用して空のdivを作成しようとしましたが、うまくいきませんでした。
私は[jsfiddle]（http://jsfiddle.net/hUGBz/1/）で 'clear：both'を試してみました。また、 'video'の終了divが正しく閉じられていません。 '/'がありません。 – john