“页脚”div进入“主”体div下如何设置css代码?

时间:2014-04-20 13:22:06

标签: html css

我在3排中有3个div, 1头div 2主体div 3英尺潜水

我的问题是“页脚”div在“主”身体div下面 我怎样才能设置css cods?!

HTML

<div id="body">
    <div id="head-img">header</div>
    <div id="menu"></div>
    <div id="main-body">
        <div id="main-body-left">
            <div id="main-body-left-top">
                <img src="img/pic.jpg" width="641" height="456" />
            </div>
            <div id="main-body-left-bottom">
                <div id="left-lin-box">1</div>
                <div id="middle">2</div>
                <div id="right-news-box">3</div>
            </div>
        </div>
        <div id="main-body-right">Right</div>
    </div>
    <div id="footer">foooooooooooooter</div>
</div>

CSS

#main-body {
    width:905px;
    background-color:#f8f7f3;
    clear:both;
}
#main-body-left {
    float: left;
    width: 75%;
    margin: 1px 2px;
    display: inline;
    border:#900 1px solid
}
#main-body-right {
    float: right;
    text-align: left;
    margin: 2px 10px;
    display: inline;
}
#left-lin-box {
    float:left;
    width: 30%;
}
#middle {
    float: left;
    width: 30%;
}
#right-news-box {
    float: left;
    width: 40%;
}
#footer {
    background-color:#393939;
    height:50px;
}

1 个答案:

答案 0 :(得分:2)

您必须清除页脚div的float属性。查看工作演示 - &gt;

EDIT

#footer {
    clear:both; /* <-- added this line */
    background-color:#393939;
    height:50px;
}

有关清除浮动link

的其他信息