css - html and divs content -

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 bigger, min-height, becomes on #footer. what's wrong?

---

upd: example address: link

thanks providing content. looks problem happening because #content-center has fixed height of 200px. rid of (and fixed height #content-left , #content-right unless have reason keep it), or change min-height instead, , footer should show below content expected.

you'll still run problems if #content-left or #content-right longest column. deal that, remove footer #content-wrapper div -- set structure 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 doesn't work you.