如何使用DIV Float和inline处理图像

Question

我在处理div上的图像时遇到了这个挑战。我有三个不同的图像，一个在页面的最顶部，页面的底部和一个应​​该在其“y”上重复的中间图像。这一切都已经安排好了。我的问题是，我希望底部图像的高度与其中的内容一致（内容在div内联，浮动左边 - 它应该是两列内容）但是如果我放下底部图像不会跟随浮动左边的内容，当不在那个状态时，一切都好。这个挑战让我疯狂。这附近有人可以帮忙吗？

非常感谢！

这是代码结构......

<div id="topBackground">
<div id="bottomBackground">
<div id="page">
    <div id="content">
        <div id="main">
            <div id="mainTopBg">    
                <div id="mainContent">

                    <div id="leftCol">
                    </div>

                    <div id="sidebar">        
                    </div>

                </div>
            </div>
        </div>
    </div>
    <!--/content -->

</div>
    <!--/page -->
</div>
</div>

与这些相关的CSS是：

#page {
    margin:0 auto 0 auto;   
    width: 900px
}

#content {
    padding-top: 140px;
}

#topBackground {
    background:url(images/wrap_bgTopUtensils.png) top center no-repeat;
    width:100%;
}

#bottomBackground {
    background:url(images/wrap_bgBottomUtensils.png) bottom center no-repeat;
    width:100%;
}

#main {
    background:url(images/main_bgRepeat.gif) repeat-y;
    width:900px;
}

#mainTopBg {
    background:url(images/main_bgTop.gif) top no-repeat;
}

#mainContent {
    background:url(images/main_bgBottom.png) bottom no-repeat;
    min-height:935px;
    width:840px;
    padding:50px 30px;
}

#leftCol {
    display:inline;
    float:left;
}

#leftCol p {
    margin-bottom:10px;
    margin-top:10px;
    line-height:20px;
}

#leftCol h2 {
    margin-bottom:10px;
    margin-top:10px;
    font-size:35px;
}

#sidebar {
    display:inline;
    float:right;
    width:340px;
}