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 is bigger, than m开发者_如何学编程in-height, it becomes over the #footer. What's wrong?

UPD: Example address: link

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.

you need a new item. a clearer wich clears the floating inside the main div

• you dont need any of position:relative
• you dont need any of the clear:both

• but you need a new item inside the content-wrapper

this. thats all.

floated divs like a points. they not affect the size of a div or the width

another nice solution to use the table stuff:

CSS 100% width in floated div

this is not really the answer, but i prefer you to use table displayed divs, and they can be resized, placed better than only floated divs.