答案 0 :(得分：2)
您需要在.rightpane之后清除浮动，浮动元素将从正常的html流中删除。只需在.rightpane之后添加一个带有样式clear:both
http://jsfiddle.net/KNfrm/1/ - http://jsfiddle.net/KNfrm/1/show
答案 1 :(得分：1)
CODE：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tile Mode</title>
<style>
body {
margin: auto;
background-color:#fff;
font-family:arial, verdana, helvetica;
font-size:12px;
color:#222;
}
.center{
margin-left:auto;
margin-right:auto;
margin-top:0px;
width:1000px;
height:auto;
display:block;
background-color:#000;
}
.frameDiv {
margin-left:auto;
margin-right:auto;
margin-top:0px;
width:1000px;
height:auto;
display:block;
background-color:#000;
}
.header {
width:auto;
height:150px;
background-color:transparent;
}
.logo {
height:100px;/*background-image:url(./images/header.png);*/
}
.menu {
height:50px;
width:auto;
background-color:#ccc;
}
.menus {
list-style-type: none;
list-style-position:outside;
position: relative;
margin: 0;
padding: 0;
}
.menus li {
display: block;
overflow: hidden;
padding: 0;
cursor: pointer;
float: left;
width: 200px;
height: 50px;
margin-right: 0px;
background-image:url(./images/menu.png);
background-repeat:no-repeat;
}
.menus a {
display:block;
height:50px;
text-indent:-9999px;
outline:none;
}
#menu1 {
background-position:0px 0px;
}
#menu2 {
background-position:-200px 0px;
}
#menu3 {
background-position:-400px 0px;
}
#menu4 {
background-position:-600px 0px;
}
#menu5 {
background-position:-800px 0px;
}
#menu1.active, #menu1:hover {
background-position: 0 bottom;
}
#menu2.active, #menu2:hover {
background-position: -200px bottom;
}
#menu3.active, #menu3:hover {
background-position: -400px bottom;
}
#menu4.active, #menu4:hover {
background-position: -600px bottom;
}
#menu5.active, #menu5:hover {
background-position: -800px bottom;
}
.leftpane {
float:left;
width:750px;
height:auto;
display:block;
background-color:transparent;
}
.rightpane {
float:right;
width:250px;
height:auto;
background-color:transparent;
}
.content {
width:auto;
background-color:transparent;
display:block;
border-color:#666;
border-style:solid;
border-width:5px;
}
.footer {
margin:0px;
width:auto;
height:100px;
background-color:#461015;
display:block;
text-align:center;
overflow:hidden;
}
.footer p {
display:inline;
}
.footer p a:link {
color: #fff;
text-decoration:none;
}
.footer p a:visited {
color: #fff;
text-decoration:none;
}
.footer p a:hover {
color: #fff;
text-decoration:none;
}
.footer p a:active {
color: #fff;
text-decoration:none;
}
.quote {
margin-left:35px;
margin-top:20px;
margin-bottom:20px;
margin-right:35px;
width:180px;
height:40px;
display:block;
}
.facebook {
margin-left:35px;
margin-top:20px;
margin-bottom:20px;
margin-right:35px;
width:180px;
height:40px;
display:block;
background-image:url(images/facebook.png);
background-repeat:no-repeat;
}
.linkedin {
margin-left:35px;
margin-top:20px;
margin-bottom:20px;
margin-right:35px;
width:180px;
height:40px;
display:block;
background-image:url(images/linkedin.png);
background-repeat:no-repeat;
}
.twitter {
margin-left:35px;
margin-top:20px;
margin-bottom:20px;
margin-right:35px;
width:180px;
height:40px;
display:block;
background-image:url(images/twitter.png);
background-repeat:no-repeat;
}
.hl {
border: 2px;
width: 80%;
border-color:#999;
}
ul#ticker {
width: 200px;
height: 200px;
overflow: hidden;
margin:auto;
list-style-type:none;
padding:0px;
font-family:Calibri, Arial, Tahoma;
font-style:normal;
}
ul#ticker li {
margin:0px;
padding:0px;
width: 200px;
height: 130px;
white-space:normal;
overflow:none;
text-align:justify;
}
ul#ticker li a:link {
color: #fff;
text-decoration:none;
}
ul#ticker li a:visited {
color: #fff;
text-decoration:none;
}
ul#ticker li a:hover {
color: #fff;
text-decoration:none;
}
ul#ticker li a:active {
color: #fff;
text-decoration:none;
}
ul#ticker li span {
display: block;
color: #06C;
text-align:center;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
</script>
<script type="text/javascript">
$(function()
{
var ticker = function()
{
setTimeout(function(){
$('#ticker li:first').animate( {marginTop: '-120px'}, 800, function()
{
$(this).detach().appendTo('ul#ticker').removeAttr('style');
});
ticker();
}, 4000);
};
ticker();
});
</script>
<body>
<div class="center">
<div class="frameDiv">
<div class="header">
<div class="logo"> </div>
<div class="menu">
<ul class="menus">
<li id="menu1"><a href="index.php">Home</a></li>
<li id="menu2"><a href="aboutus.php">About us</a></li>
<li id="menu3"><a href="services.php">Services</a></li>
<li id="menu4"><a href="gallery.php">Gallery</a></li>
<li id="menu5"><a href="contactus.php">Contact</a></li>
</ul>
</div>
</div>
<div class="mid">
<div class="leftpane">
<div class="image" style="margin:5px; margin-right:0px; display:block;">
<img src="http://www.grnyrenovation.com/images/nycpremier.jpg"; style="overflow:hidden; width:745px" />
</div>
<div class="content"></div>
<div class="footer"> <br/>
<hr style="height:2px; border:1px;" noshade="noshade"/>
<p><a href="index.php">Home |</a></p>
<p><a href="aboutus.php">About us |</a></p>
<p><a href="services.php">Services |</a></p>
<p><a href="gallery.php">Gallery |</a></p>
<p><a href="contactus.php">Contact</a></p>
<hr style="height:2px; border:1px; width:70%" noshade="noshade"/>
<p style="margin:8px">© Tile</p>
</div>
</div>
<div class="rightpane">
<div style="clear:both;">
<div class="quote"> </div>
<div class="facebook"> </div>
<div class="linkedin"> </div>
<div class="twitter"> </div>
<hr/ class="hl" style="height:2px; border:1px;" noshade="noshade">
<div class="testimonial">
<div style="color:#FFF; font-weight:bold; font-size:large; font-family:'MS Serif', 'New York', serif; text-align:center;">
<h3>Testimonials</h3>
</div>
<div class="tickerclass">
<ul id="ticker">
<li> <span>Title 1</span> <a href="#"> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the. </a> </li>
<li> <span>Title 2</span> <a href="#"> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the </a> </li>
<li> <span>Title 3</span> <a href="#"> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the </a> </li>
<li> <span>Title 4</span> <a href="#"> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the </a> </li>
<li> <span>Title 5</span> <a href="#"> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the </a> </li>
</ul>
</div>
</div>
<br/>
<hr class="hl" style="height:2px; border:1px;" noshade="noshade"/>
<div class="acceridation" style="text-align:center; height:60px;">
<img style="margin:auto;overflow:hidden;width:80px;height:50px;" align="middle" src="http://www.grnyrenovation.com/images/nkba_170x90.jpg" />
<img style="margin:auto;overflow:hidden;width:80px;height:50px;" align="middle" src="http://www.grnyrenovation.com/images/sm_EPA-Lead-Safe-Certified.png"/>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 2 :(得分：0)
尝试将代码添加到中心div
.center{ overflow:auto;}