Question

I have a div container with height:auto, this I assume would increase the height depending on the contents. However I have another div right after this first div, with height:auto it will overlap the current div.

div.footer{
    position:relative;
    width:1010px;
    height:50px;
    margin-top:auto;
    margin-left:auto;
    margin-right:auto;
    border:1px solid gray;
    font-family:Helvetica;
}

This is my current css for the bottom div. How do I make it appear at the end of the first div, instead of overlapping?

The first div:

div.mainbody5{
    position:relative;
    margin-top:20px;
    width:1010px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    border:1px solid gray;
    font-family:Helvetica;
}

Answer 1

They’re not overlapping on jsfiddle for me, but I can still help you out. Just add this right after the first div:

<br style="clear:both;" />

This should add the space you’re looking for between them.

This also keeps them centered on the page. 😉