How to work on images with DIV Float and inline

I have this challenge on handling images on div. I have three different images, one on topmost of the page, bottom of the page and a middle image that should be repeating on its "y". It's all arranged already. My problem is, I wanted the bottom image's height to go with the content in it (the content is on div inline with float left---it's supposed to be a two column content) But the bottom image doesn't follow if I put the content on float left and when not in that state everything's all ok. This challenge is driving me nuts already. Can anybody around here help?

Many Thanks!

#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;
    flo开发者_开发百科at: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;
}

<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>