html and divs content

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

You've missed a lot of the necessary code needed to figure this one out. — sevenseacat, Feb 06 '11 at 14:29
what is `#content-wrapper`'s height 100% of? If it's 100% of the body, then where does the `#footer` fit in? — Michael Martin-Smucker, Feb 06 '11 at 14:42
I think this is a pretty close approximation of your structure, but I'm not seeing the problem you mentioned. Could you tweak this fiddle, or link to a real example of the problem? http://jsfiddle.net/mlms13/TfESA/ — Michael Martin-Smucker, Feb 06 '11 at 14:54
@Ockonal, I can't get the link to work... it just times out for me. — Michael Martin-Smucker, Feb 06 '11 at 16:21
@michael-martin-smucker http://dl.dropbox.com/u/932520/site.zip oh sorry, here is the local html-version. — Max Frai, Feb 06 '11 at 16:27

score 2 · Answer 1 · edited May 23 '17 at 12:20

2

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.

edited May 23 '17 at 12:20

Community

1
1

answered Feb 06 '11 at 14:33

Gergely Fehérvári

7,811
6
47
74

1

I might not be understanding the original example, but in general setting the `overflow` should eliminate the need for empty divs cluttering up your html, shouldn't it? – Michael Martin-Smucker Feb 06 '11 at 14:38
2

A clearfix DIV? Isn't that deprecated for over 5 years now (in favor of `overflow:auto`)? – Šime Vidas Feb 06 '11 at 14:39
@ sime vidas : might be. i dont know. i will search for this – Gergely Fehérvári Feb 06 '11 at 14:42
@fehergeri Here, read this: http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html (that article is 6 years old `:)`) – Šime Vidas Feb 06 '11 at 14:46
@sime vidas: i found this. http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best. – Gergely Fehérvári Feb 06 '11 at 14:46
@fehergeri overflow:auto is the superior method. IE6 requires a few workaround CSS properties, but that is (obviously) still better than adding dedicated markup. – Šime Vidas Feb 06 '11 at 15:02
@fehergeri, look at update, plaese. I've added design address. – Max Frai Feb 06 '11 at 15:24

Michael Martin-Smucker · Accepted Answer · 2011-02-06T17:39:37.080

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.

html and divs content

2 Answers2