a div with id="wrapper" has a fixed width and another div id="content" has the style float:right (it doesn't have a fixed height cos we don't know how many words will be put here currently); then the last div ( id="footer ) don't want to follow the flow so make it --> clear: both

then strange things happen:

if you set the #footer with " margin-top: 100px;" it cannot display that margin properly. With the help of Dreamweaver, it shows that that margin 'overlaps' the content part ---- strange ~~~

so anyone could help with it?

thanks a lot.

abduraooft

01-09-2010, 05:16 PM

if you set the #footer with " margin-top: 100px;" it cannot display that margin properly. With the help of Dreamweaver, it shows that that margin 'overlaps' the content part ---- strange ~~~

so anyone could help with it? Please post your complete code or a link to your page.

Excavator

01-09-2010, 05:57 PM

Hello mehere8,
I took the liberty of creating a demo. I've run into this before and solved it either by

It seems when #content is floated it is taken out of the normal flow of the document. That's why we need to clear our floats and why it doesn't give #footer's margin-top anything to act on.

When you go further in development, adding more elements and content, it could be this will be avoided.
Have a look at this demo (http://nopeople.com/CSS/equal_length_columns/index.html)and what happened when you add margin-top:100px; to it's footer. It works now because the floated element is not the tallest one so #footer's margin has something to push off of.

I don't really know of any other fix, though I have demonstrated 3 here that work.

mehere8

01-10-2010, 07:26 AM

Please post your complete code or a link to your page.

something like this:

<style>
#wrapper{ width:960px; margin:0,auto;}
#content{ width:600px; float:right;}
#footer{ clear:both; margin-top: 100px;
/* 100px is just used to see the result clearly*/}
</style>

I'd be curious to see what anyone else knows about this though. It doesn't appear to be uncollapsing margin (http://nopeople.com/CSS/uncollapsing-margin/index.html)...

actually i doubt that this problem arises from collapsing margin but it doesn't.
maybe it is caused by "clear: float;" this property

your method -- adding margin-bottom to the upper div is useful but i am still confused why the margin-top of #footer is useless~~~

mobotech

01-10-2010, 08:19 AM

This link might help: http://www.brunildo.org/test/margins_clear.html Situation similar to 1.1

Not sure what's causing it, but if you add borders on all div and play with margin you'll notice that when applying margin-top, it applies to the top of the wrapper and not on the bottom of content div.
So if you apply a margin-top height higher than the content height, you'll see some gap.

Excavator

01-10-2010, 10:12 AM

actually i doubt that this problem arises from collapsing margin but it doesn't.

Like I said, the problem is not collapsing margin.

maybe it is caused by "clear: float;" this property

No such thing. It is not caused by clear:both; in the footers styling either.

your method -- adding margin-bottom to the upper div is useful but i am still confused why the margin-top of #footer is useless~~~

I showed two other solutions as well. Did you see if either of those would work for you?

I'm pretty sure this is why it's happening, even though I'm sure someone else can explain it better:
It seems when #content is floated it is taken out of the normal flow of the document. That's why we need to clear our floats and why it doesn't give #footer's margin-top anything to act on.

Candygirl

01-10-2010, 08:16 PM

Hello,

I'll try to explain what I've understand about this case:

putting #footer outside of #wrapper
Just notice that this will work only if #wrapper has a property that establish a new block formatting contexts (here, you have the overflow:auto)

putting margin-bottom on the tallest div contained in #wrapper
I'd give the margin-bottom to all the containers in case of one is tallest then the other on an other page.

It seems when #content is floated it is taken out of the normal flow of the document.
I agree regarding of the css 2.1 candidate recommendation:

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist.

[...] it doesn't give #footer's margin-top anything to act on.
The margin-top does actually act but, ignoring the float, from the current-line witch is on the top of #wrapper in your demo. If we give a very hight margin-top, higher that the content's high, we can see it acts.

An other way to solve this isue is to float the footer (float:left;width:100%; ). The margin will then be calculated from the floats (or regular content) above and not anymore from the curent-line of the normal flow.

Excavator

01-10-2010, 08:29 PM

An other way to solve this isue is to float the footer (float:left;width:100%; ). The margin will then be calculated from the floats (or regular content) above and not anymore from the curent-line of the normal flow.

Good catch Candygirl, I count 4 solutions now.
That does solve the problem but I always cringe at floating full width elements. That's just a personal thing though, I doubt there's anything wrong with doing it that way.

mehere8

01-12-2010, 10:56 AM

another method from Excavator is great:

make another wrapper to wrap the content and the left column then there is no need to set footer clear:both