Question

I have a page with a container div that holds three additional divs as follows:

<div id="container>
   <div id="top"></div>

   <div id="content"> 
    <!-- Dynamic content placed here auto expands this div  -->
   </div

   <div id="bottom"> Copyright logo </div>

</div>

and my CSS:

    #containerDiv {
        position: relative; 
        right: 425px !ie7; 
        width: 910px; 
        margin: 0px auto;
    }

    #top {
        background: url(../images/top_width956px.gif) top center no-repeat;
        height: 39px;
        line-height: 0;
        margin: 0px auto;
        width: 956px;
        position: relative;
        left: 19px;
    }

    #content {
        position: relative;
        margin: 20px 201px 20px 201px;
        border-right: 1px solid #333333;
        border-bottom: 1px solid #333333;
        border-left: 1px solid #333333;
        background: #ffffff;
        color: #333333;
        padding: 20px;
        z-index: 3;
    }

#bottom {
height: 161px;
color: #666;
font-size: 80%;
padding: 20px;
margin: 0 auto;
width: 908px;
}

My problem is that I have dynamic content that’s loaded into the “content” div, which causes it to overlap into the “bottom” div. I don’t want to hide the content, so overflow: hidden is not an option. The behavior I’m looking for is, if the content expands the middle div, it should push the “bottom” div down. I’m not sure how to achieve that. Any help is appreciated.

UPDATE:

Thanks all for the help. Turns out the “content” div had an inline style that had several inline styles that were conflicting with the styles in the css file; a coworker had been working on this and I didn’t notice the inline style amongst all the other content. One of them had the position set to “absolute”, I removed that and it seemed to fix the problem. I also moved the rest of the inline styles into the css file Here is an updated version of my code:

Updated CSS:

#containerDiv {
    position: relative; 
    right: 425px !ie7; 
    width: 910px; 
    margin: 0px auto;
}

#top {
    background: url(../images/top_width956px.gif) top center no-repeat;
    height: 39px;
    line-height: 0;
    margin: 0px auto;
    width: 956px;
    position: relative;
    left: 19px;
}

#center-col {
    position: relative;
    margin: 0px;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #333333;
    background: #ffffff;
    color: #333333;
    padding: 20px;
    z-index: 3;
    width: 908px;
    text-align: center;
    margin-right: auto; 
    margin-bottom: 75px; 
    margin-left: auto;
    visibility: visible;
}

#bottom {
    height: 161px;
    color: #666;
    font-size: 80%;
    padding: 20px;
    margin: 0 auto;
    width: 908px;
    position: relative;
    bottom: 0px;
}

Sorry for the confusion with the html above, I hand typed it just to give a quick and dirty example of my page layout. My actual html file contains way more content and I might add it is correctly formatted.

Answer 1

It does.. when you have correct syntax. Take a look at this http://jsfiddle.net/5uSc7/1/