Div容器有重复背景图像和浮动div

时间:2013-07-05 22:18:46

标签: html css

我已经开始使用div而不是表格了。 我有一个带有重复图像作为背景的容器。由于我的动态内容,它需要自动调整大小。 我遇到的问题是我想在这个容器中并排放置两个div。 当我浮动这些div时,这会导致我的汽车容器div不随其展开。解决问题的唯一方法是将容器设置为我无法做到的高度,因为每个动态页面上的容器都会有所不同。

http://www.blockdesigns.co.uk/html5.php这是我的榜样。

代码:

    <body>
    <div id="main_wrapper">
    <header id="top_header">
    </header>
    <div id="main_body">This part should go all the way down to the footer.<br>

    <div id="leftside">Float left div here</div>
    </div>
    <footer id="footer">
    </footer>
    </div>
    </body>

    CSS

    #main_wrapper{
    width:1000px;
    margin: 20px auto;
    text-align:left;
    }
    #main_body{
    background:url(Body1000.jpg);
    background-repeat:repeat;
    text-align:center;
    width:1000px;
    }
    #leftside{
    float:left;
    width:200px;
    height:300px;
    margin:10px;
    }

1 个答案:

答案 0 :(得分:3)

overflow: hidden;添加到main_body

示例

#main_wrapper {
    width: 1000px;
    margin: 20px auto;
    text-align: left;
}
#main_body {
    background: url(Body1000.jpg);
    background-repeat: repeat;
    text-align: center;
    width: 1000px;
    overflow: hidden;
}
#leftside {
    float: left;
    width: 200px;
    height: 300px;
    margin: 10px;
}