1
A
回答
2
您需要.rightpane后清除浮动，浮动元素从正常的HTML流将被删除。风格.rightpane后，只需添加一个空的块级元素clear:both
http://jsfiddle.net/KNfrm/1/ - http://jsfiddle.net/KNfrm/1/show
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>
0
试试这个在您的代码添加到中心DIV
.center{ overflow:auto;}
相关问题
- 1. 股利高度修复基于％列
- 2. 股利不会自动扩大，由于动态加载的内容
- 3. 股利不扩展到最大宽度
- 4. 股利扩展与jQuery的假标签
- 5. 使股利矩形扩展（高度）后点击链接
- 6. CSS - 股利不会算子格
- 7. 股利高度不支持
- 8. MVC3动态更新与控制事件的子行动股利
- 9. 刷新股利全自动
- 10. 隐藏股利基于jQuery中
- 11. ICEFaces会话自动扩展
- 12. 股利应高于其他分区，不低于
- 13. 股利不延伸到身体
- 14. 内部div不会扩展到父母的身高
- 15. aboloutelyly div不会扩展到其父母的100％身高
- 16. Qt视口控件不会在新的子控件中扩展除了QBoxLayout
- 17. 股利和CSS用于与固定/不固定的高度
- 18. 身高：自动;不与Firefox
- 19. 股利与溢出：自动消失
- 20. AJAX自动完成扩展不工作的权利，VB.Net
- 21. 定制滚动条的设计对于任何股利而不是全身
- 22. 股利不会一路下跌屏幕
- 23. 股利溢出不会隐藏正确
- 24. 股利溢出不会用帆布
- 25. 扩展控件
- 26. 有父DIV高度自动尺寸基于子DIV高度
- 27. 滚动到动态股利
- 28. 股利不对齐
- 29. CakePHP：基于扩展的不同路由
- 30. 自动扩展的OData与控制器