Question

I have such structure (divs):

#content-wrapper->
  #left
  #center
  #right
#footer

#footer
{
    position: relative;
}

#content-wrapper
{
    position: relative;
    clear: both;
    overflow: hidden;

    width: 100%;
        height: 100%;

    min-height: 300px;
}

But when text in #center div is bigger, than min-height, it becomes over the #footer. What’s wrong?

---

UPD:
Example address: link

Answer 1

Thanks for providing the content. It looks like this problem is happening because #content-center has a fixed height of 200px. Get rid of this (and the fixed height for #content-left and #content-right unless you have a really good reason to keep it), or change it to min-height instead, and the footer should show up below the content as expected.

You’ll still run into some problems if #content-left or #content-right is the longest column. To deal with that, you could remove the footer from the #content-wrapper div — set your structure up like this:

<div id="content-wrapper">
    <div id="content-left"></div>
    <div id="content-right"></div>
    <div id="content-center"></div>
</div>
<div id="footer"></div>

Let me know if that doesn’t work for you.